/* ============================================================================= 01 — DESIGN TOKENS ----------------------------------------------------------------------------- Figma screenshot'lar asosida ekstraktsiya qilingan aniq qiymatlar. ISHONCH brendi — yorqin yashil, oq sahifa. ========================================================================== */ :root { /* ========================================================================== RANGLAR — Brand (ISHONCH yorqin yashil) ========================================================================== */ --color-primary: #18B83C; /* Tugma yashili — Figma 700 */ --color-primary-hover: #15A235; /* Hover quyuqroq */ --color-primary-active: #11842B; /* Bosilgan paytda */ --color-primary-light: #E8F8EF; /* Yumshoq fon */ --color-primary-50: #F0FBF4; /* Eng yengil tint */ /* Brand qora (ISHONCH yozuvi) */ --color-brand-dark: #1A1A1A; --color-brand-text: #1A1A1A; /* "ISHONCH" yozuvi */ --color-brand-accent: var(--color-primary); /* "itilium" yashil yozuv */ /* ========================================================================== RANGLAR — Neytral (oq fonda) ========================================================================== */ --color-white: #FFFFFF; --color-gray-50: #FAFAFA; --color-gray-100: #F5F5F5; --color-gray-200: #E5E7EB; --color-gray-300: #D4D4D4; --color-gray-400: #A3A3A3; --color-gray-500: #737373; --color-gray-600: #525252; --color-gray-700: #404040; --color-gray-800: #262626; --color-gray-900: #171717; --color-black: #000000; /* ========================================================================== STATUS RANGLARI — Figma'dagi badge'lardan ========================================================================== */ /* Yashil — Зарегистрировано, В работе, Согласовано, Решено */ --color-status-success: #18B83C; --color-status-success-bg: #E8F8EF; --color-status-success-text: #0F7A3A; /* Sariq/orange — Ожидает ответа, На согласовании, По уточнению, Выполнено */ --color-status-warning: #F59E0B; --color-status-warning-bg: #FEF3C7; --color-status-warning-text: #B45309; /* Qizil — Не подтверждено, Уведомления badge */ --color-status-danger: #EF4444; --color-status-danger-bg: #FEE2E2; --color-status-danger-text: #B91C1C; /* Ko'k — Назначено */ --color-status-info: #3B82F6; --color-status-info-bg: #DBEAFE; --color-status-info-text: #1E40AF; /* Kulrang — Закрыто, Приостановлено */ --color-status-neutral: #737373; --color-status-neutral-bg: #F5F5F5; --color-status-neutral-text: #404040; /* Eski aliaslar (saqlash uchun) */ --color-success: var(--color-status-success); --color-success-bg: var(--color-status-success-bg); --color-success-text: var(--color-status-success-text); --color-warning: var(--color-status-warning); --color-warning-bg: var(--color-status-warning-bg); --color-warning-text: var(--color-status-warning-text); --color-danger: var(--color-status-danger); --color-danger-bg: var(--color-status-danger-bg); --color-danger-text: var(--color-status-danger-text); --color-info: var(--color-status-info); --color-info-bg: var(--color-status-info-bg); --color-info-text: var(--color-status-info-text); /* ========================================================================== SEMANTIK ALIASLAR ========================================================================== */ /* Background — Figmada toza oq, gradient YO'Q */ --bg-page: #FFFFFF; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-overlay: rgba(23, 23, 23, 0.5); --bg-muted: #F5F5F5; --bg-subtle: #F8F8F8; /* Text */ --text-primary: #1A1A1A; --text-secondary: #525252; --text-tertiary: #737373; --text-muted: #A3A3A3; --text-on-primary: #FFFFFF; --text-link: var(--color-primary); --text-link-hover: var(--color-primary-hover); /* Border */ --border-default: #E5E7EB; --border-strong: #D4D4D4; --border-focus: var(--color-primary); --border-hover: var(--color-primary); --border-danger: var(--color-danger); /* ========================================================================== TIPOGRAFIYA ========================================================================== */ /* Font family — Figma'da Inter ishlatilgan, header.php da Google Fonts dan yuklanadi */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif; --font-family-heading: var(--font-family-base); --font-family-mono: 'JetBrains Mono', 'Courier New', monospace; /* Og'irliklar */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* O'lchamlar */ --font-xs: 12px; --font-sm: 14px; --font-base: 15px; --font-md: 16px; --font-lg: 18px; --font-xl: 20px; --font-2xl: 24px; --font-3xl: 30px; --font-4xl: 36px; --font-5xl: 48px; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ========================================================================== SPACING (4px grid) ========================================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Semantik */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ========================================================================== BORDER RADIUS — Figmada o'rta radius (8-12px) ========================================================================== */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ========================================================================== SHADOWS — Figmada yumshoq soyalar ========================================================================== */ --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-sm: 0 1px 3px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-md: 0 4px 8px rgba(23, 23, 23, 0.06), 0 2px 4px rgba(23, 23, 23, 0.04); --shadow-lg: 0 10px 20px rgba(23, 23, 23, 0.08), 0 4px 8px rgba(23, 23, 23, 0.04); --shadow-xl: 0 20px 30px rgba(23, 23, 23, 0.1), 0 10px 15px rgba(23, 23, 23, 0.06); --shadow-focus: 0 0 0 3px rgba(24, 184, 60, 0.15); /* ========================================================================== LAYOUT ========================================================================== */ --container-max: 1200px; --container-padding: 24px; --header-height: 72px; --header-height-mobile: 56px; /* ========================================================================== KOMPONENT O'LCHAMLARI ========================================================================== */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --input-height-sm: 36px; --input-height-md: 44px; --input-height-lg: 52px; /* ========================================================================== ANIMATSIYA ========================================================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================================== Z-INDEX ========================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; /* ========================================================================== BREAKPOINTS ========================================================================== */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* ============================================================================= 02 — RESET ----------------------------------------------------------------------------- Brauzer default'larini tozalash. Zamonaviy reset. ========================================================================== */ /* Box sizing — barcha elementlar uchun */ *, *::before, *::after { box-sizing: border-box; } /* Margin va padding ni nolga keltirish */ * { margin: 0; padding: 0; } /* HTML va body */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } body { min-height: 100vh; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Media elementlar */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Form elementlar font'ni meros qiladi */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; appearance: none; } button:disabled { cursor: not-allowed; } /* Linklar */ a { color: inherit; text-decoration: none; } a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Ro'yxatlar */ ul, ol { list-style: none; } /* Sarlavhalar — line-height */ h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight); font-weight: var(--font-semibold); text-wrap: balance; } /* Paragraflar */ p { text-wrap: pretty; } /* Stol */ table { border-collapse: collapse; border-spacing: 0; } /* Fokus uslublari */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Tanlash rangi */ ::selection { background: var(--color-primary-light); color: var(--color-primary-active); } /* Scrollbar (Webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-gray-100); } ::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); } /* Placeholder rangi */ ::placeholder { color: var(--text-muted); opacity: 1; } /* Hidden attribute */ [hidden] { display: none !important; } /* ============================================================================= 03 — BASE ----------------------------------------------------------------------------- HTML, body va tipografiya uchun asosiy stillar. ========================================================================== */ html { font-size: 16px; } body { font-family: var(--font-family-base); font-size: var(--font-base); font-weight: var(--font-regular); color: var(--text-primary); background-color: var(--bg-page); line-height: var(--leading-normal); } /* ============================================================================ TIPOGRAFIYA ============================================================================ */ h1, .h1 { font-family: var(--font-family-heading); font-size: var(--font-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-md); } h2, .h2 { font-family: var(--font-family-heading); font-size: var(--font-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-md); } h3, .h3 { font-family: var(--font-family-heading); font-size: var(--font-2xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); color: var(--text-primary); margin-bottom: var(--space-sm); } h4, .h4 { font-family: var(--font-family-heading); font-size: var(--font-xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-sm); } h5, .h5 { font-family: var(--font-family-heading); font-size: var(--font-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-xs); } h6, .h6 { font-family: var(--font-family-heading); font-size: var(--font-base); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--text-primary); margin-bottom: var(--space-xs); } p { font-size: var(--font-base); line-height: var(--leading-normal); color: var(--text-primary); margin-bottom: var(--space-md); } p:last-child { margin-bottom: 0; } /* ============================================================================ LINKLAR ============================================================================ */ a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); } /* ============================================================================ FOYDALI MATN STILLARI ============================================================================ */ small, .text-small { font-size: var(--font-sm); } .text-xs { font-size: var(--font-xs); } .text-lg { font-size: var(--font-lg); } .text-xl { font-size: var(--font-xl); } strong, b, .text-bold { font-weight: var(--font-bold); } .text-semibold { font-weight: var(--font-semibold); } .text-medium { font-weight: var(--font-medium); } em, i, .text-italic { font-style: italic; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } /* ============================================================================ MATN RANGLARI ============================================================================ */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-link { color: var(--text-link); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .text-info { color: var(--color-info); } .text-white { color: var(--color-white); } /* ============================================================================ MATN HIZALAMA ============================================================================ */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /* ============================================================================ SAQLASH MAVJUD UTILITY KLASSLAR (PHP'da ishlatiladigan) ============================================================================ */ .align-center { text-align: center; } .pre-wrap { white-space: pre-wrap; word-wrap: break-word; } .hidden, .hide { display: none !important; } .no_hide { display: block !important; } /* ============================================================================ TEXT WRAP GUARANTEE — DEV-3773 davomi ---------------------------------------------------------------------------- Maqsad: hech qanday matn maydondan yoki kartadan TASHQARIGA chiqmasin. DIQQAT-1: `word-break: break-word` (== `overflow-wrap: anywhere`) ISHLATILMAYDI — u min-content'ni bitta harfga tushirib grid/flex ustunlarni yanchadi (DEV-3773 aynan shundan kelib chiqqan edi). Faqat `overflow-wrap: break-word`. DIQQAT-2: bu yerda `white-space` KONTEYNERGA berilmaydi. `pre-wrap` bersak, 1C'dan kelgan chiroyli formatlangan HTML'dagi tag'lar orasidagi manba belgilari ko'rinadigan bo'sh qatorlarga aylanardi — bu 12abc4f commit'i tuzatgan xatoning aynan o'zi. Standart `normal` allaqachon o'raydi; bizga kerak bo'lgani — yopishtirilgan inline `pre`/`nowrap` ni qaytarish (pastda). DIQQAT-3: `:is()` o'z argumentlarining ENG YUQORI specificity'sini oladi. Shu sababli ikki klassli selektorlar (`.slider .value`) alohida qoidaga ajratilgan — aks holda ro'yxatdagi HAMMA selektor (0,2,0) bo'lib qolib, keyingi sahifa fayllaridagi (0,1,0) qoidalarni bosib ketardi (masalan notifications.css'dagi `-webkit-line-clamp` uchun `overflow:hidden`). YANGI rich-text yuza qo'shsangiz — elementga `rich-text` klassini bering. ========================================================================== */ /* --- 1) Matn KIRITISH yuzalari -------------------------------------------- */ input, textarea, select, [contenteditable] { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* --- 2) Rich-text KONTEYNERLAR (1C HTML, Word/Outlook paste) -------------- Bir klassli ro'yxat — specificity (0,1,0). */ :is([contenteditable], .rich-text, .ticket-message__text, .ticket-info-card__description, .ticket-info-card__solution, .faq-item__answer-text, .solutions-article__text, .notification-card__solution-text) { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* Ikki klassli yuzalar — alohida (0,2,0), yuqoridagilarni ko'tarib yubormaslik uchun */ .slider .value, .news .value, #bigmodal .content { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* --- 3) Yopishtirilgan inline `white-space` ------------------------------- Inline style stylesheet'dan kuchli, shuning uchun !important shart. Qiymatga qarab aniq maqsad qo'yamiz: `normal` ga TEGMAYMIZ. */ [style*="white-space:pre"], [style*="white-space: pre"] { white-space: pre-wrap !important; /* pre / pre-line -> o'raladigan pre */ } [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; /* nowrap'da saqlanadigan bo'shliq yo'q */ } /* --- 4) Qattiq inline `width` (Word:

) ------------- */ [style*="width"] { max-width: 100%; } /* --- 5) Ichki qattiq bloklar ---------------------------------------------- */ :is([contenteditable], .rich-text, .ticket-message__text, .ticket-info-card__description, .ticket-info-card__solution, .faq-item__answer-text, .solutions-article__text, .notification-card__solution-text) :is(img, video, iframe, embed, object, table, pre, code, blockquote), .slider .value :is(img, video, iframe, embed, object, table, pre, code, blockquote), .news .value :is(img, video, iframe, embed, object, table, pre, code, blockquote), #bigmodal .content :is(img, video, iframe, embed, object, table, pre, code, blockquote) { /* !important — main.js yopishtirilgan skrinshotga `img.style.maxWidth=320px` yozadi; tor ekranda u konteynerdan kengroq bo'lib qolardi. */ max-width: 100% !important; } :is([contenteditable], .rich-text, .ticket-message__text, .ticket-info-card__description, .ticket-info-card__solution, .faq-item__answer-text, .solutions-article__text, .notification-card__solution-text) pre, .slider .value pre, .news .value pre, #bigmodal .content pre { white-space: pre-wrap; overflow-x: auto; } /* Juda keng jadval — ICHIDA scroll bo'lsin, sahifani kengaytirmasin. */ :is([contenteditable], .rich-text, .ticket-message__text, .ticket-info-card__description, .ticket-info-card__solution, .faq-item__answer-text, .solutions-article__text, .notification-card__solution-text) table, .slider .value table, .news .value table, #bigmodal .content table { display: block; overflow-x: auto; } /* ============================================================================= 04 — LAYOUT ----------------------------------------------------------------------------- Sahifa skeleti: wrapper, container, header, content. Figma asosida — desktop-first, oq fon, toza minimalistik. ========================================================================== */ /* ============================================================================ WRAPPER ============================================================================ */ .wrapper { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-page); } /* ============================================================================ CONTAINER ============================================================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } /* ============================================================================ KAFOLAT: container katta ekranda doim MARKAZDA. Sabab: Bitrix ShowHead() yoki tashqi CSS (masalan `body .container`) redesign `.container`ning margin-left'ini override qilib chapга tortib qo'yishi mumkin. Yuqori specificity (#itilium_module) + !important bilan markazlashni majburlaymiz. body/wrapper to'liq kenglikda — containing block tor bo'lib qolmasligi uchun. ============================================================================ */ html, body#itilium_module { width: 100%; max-width: 100%; } #itilium_module .wrapper { width: 100%; } #itilium_module .container { margin-left: auto !important; margin-right: auto !important; } /* ============================================================================ HEADER — Figma'dagi top bar ---------------------------------------------------------------------------- Layout: [LOGO] ............... [MENU] ............... [LANG] [AVATAR] ============================================================================ */ header { background-color: var(--bg-surface); height: var(--header-height); display: flex; align-items: center; border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: var(--z-sticky); } header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } /* Logo — ISHONCH | Help Desk (inline SVG, Figma o'lchami 190x23 — node 728:4034) */ .logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; /* Natural SVG height — Figma'da aniq 23px ko'rsatilgan */ height: 23px; } .logo__svg { display: block; height: 23px; width: auto; } /* Eski img logo (boshqa joyda ishlatilsa) */ .logo img { height: 20px; width: auto; } /* Logo o'rniga matn ham bo'lishi mumkin */ .logo .brand-name { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: 22px; font-weight: var(--font-bold); color: var(--color-brand-text); letter-spacing: -0.02em; } .logo .brand-name .accent { font-size: 14px; font-weight: var(--font-semibold); color: var(--color-brand-accent); letter-spacing: 0; } /* ============================================================================ HEADER — autentifikatsiyasiz (login sahifa) ============================================================================ */ header.header-shortcut { background-color: transparent; border-bottom: none; box-shadow: none; position: static; } header.header-shortcut .container { justify-content: flex-start; } /* ============================================================================ HEADER RIGHT GROUP — lang switcher + user ============================================================================ */ .header-right { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; } /* ============================================================================ LANGUAGE SWITCHER — Globe + Ру dropdown ============================================================================ */ .lang-switcher { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .lang-switcher__current { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-xs) var(--space-sm); background: transparent; border: none; font-size: var(--font-sm); color: var(--text-primary); font-weight: var(--font-medium); cursor: pointer; transition: opacity var(--transition-fast); font-family: var(--font-family-base); } .lang-switcher__current:hover { opacity: 0.7; } /* Globe ikonkasi — SVG inline */ .lang-switcher__icon { display: inline-block; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; color: currentColor; } .lang-switcher__label { font-weight: var(--font-medium); } .lang-switcher__arrow { display: inline-block; width: 10px; height: 10px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; transition: transform var(--transition-fast); } .lang-switcher.is-open .lang-switcher__arrow { transform: rotate(180deg); } /* Dropdown menyu — Figma'da kichikroq (faqat o'ziga yetarli joy) */ .lang-switcher__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 0; /* Figma: faqat o'ziga yetarli */ width: auto; padding: var(--space-xs); background-color: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: var(--z-dropdown); white-space: nowrap; } .lang-switcher.is-open .lang-switcher__menu { display: flex; flex-direction: column; gap: 2px; } .lang-switcher__item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-sm); color: var(--text-primary); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast); } .lang-switcher__item:hover { background-color: var(--bg-muted); color: var(--text-primary); } .lang-switcher__item.is-active { background-color: var(--color-primary-light); color: var(--color-primary-active); } /* Bayroqlar — aniq SVG (haqiqiy davlat bayroqlari) */ .lang-switcher__flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex-shrink: 0; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } /* O'zbekiston bayrog'i: ko'k–oq–yashil + qizil ipak yo'llar, oy va 12 yulduz */ .lang-switcher__flag.flag-uz { background-image: url("data:image/svg+xml;utf8,"); } /* Rossiya bayrog'i: oq–ko'k–qizil */ .lang-switcher__flag.flag-ru { background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================================ MAIN ============================================================================ */ main { flex: 1; padding: var(--space-lg) 0 var(--space-3xl); } /* ============================================================================ CONTENT CENTER (login sahifa uchun) ============================================================================ */ .content-center-v { min-height: calc(100vh - var(--header-height) - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-lg); gap: var(--space-md); } .content-center { display: flex; align-items: center; justify-content: center; } /* ============================================================================ BREADCRUMBS — Figmada "Главная > Обращения > Обращение № ..." ============================================================================ */ .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); font-size: var(--font-sm); color: var(--text-tertiary); } .breadcrumbs a { color: var(--text-tertiary); text-decoration: none; transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs__separator { color: var(--text-muted); user-select: none; font-size: 14px; } /* Oxirgi breadcrumb item (parent) — YASHIL */ .breadcrumbs__current, .breadcrumbs a.breadcrumbs__current { color: var(--color-primary) !important; font-weight: var(--font-medium); } .breadcrumbs a.breadcrumbs__current:hover { color: var(--color-primary-hover) !important; } /* ============================================================================ PAGE TITLE — Figmadagi sahifa sarlavhasi ---------------------------------------------------------------------------- PHP: .title-button-back .title-button-back-title ============================================================================ */ .page-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); } .page-title__back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; color: var(--text-primary); font-size: var(--font-xl); transition: color var(--transition-fast); } .page-title__back:hover { color: var(--color-primary); } /* PHP fayllaridagi mavjud .title-button-back-* uchun */ .title-button-back { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .title-button-back-breadcrumbs { flex: 1; font-size: var(--font-sm); color: var(--text-tertiary); } .title-button-back-title { font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); } /* ============================================================================ FLEX UTILS ============================================================================ */ .d-flex { display: flex; } .flex-column { flex-direction: column; } .jc-center { justify-content: center; } .center { text-align: center; } /* ============================================================================ LOADING — Shadcn-style spinner + backdrop blur .loading_total_back — global overlay (jQuery `.show()` / `.hide()` ishlatadi) ::before — Shadcn loader-2 SVG (rotating arc) ::after — kichik centred card (oq, shadow, blur backdrop ostidan ko'rinadi) ============================================================================ */ .loading_total_back { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-modal-backdrop); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s ease; } .loading_total_back.active, .loading_total_back[style*="display: block"], .loading_total_back[style*="display:block"] { display: flex !important; opacity: 1; } /* Shadcn loader2 — SVG via background, smooth spin */ .loading_total_back::before { content: ''; display: block; width: 48px; height: 48px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; animation: spinner-rotate 900ms linear infinite; filter: drop-shadow(0 2px 6px rgba(24, 184, 60, 0.18)); } @keyframes spinner-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Eski .loading class — page'ga inline qo'shilgan spinner (saqlanadi) */ .loading { width: 24px; height: 24px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; border: none; animation: spinner-rotate 900ms linear infinite; } /* Universal page transition spinner — har qanday sahifa yuklanayotganda body.is-navigating bo'lgan paytda full-screen spinner ko'rsatamiz */ body.is-navigating .loading_total_back { display: flex !important; opacity: 1; } /* ============================================================================ BURGER MENU (mobile only) ============================================================================ */ .header-burger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 36px; height: 36px; padding: 0; background: transparent; border: none; cursor: pointer; gap: 5px; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); flex-shrink: 0; } .header-burger:hover { background-color: var(--bg-muted); } .header-burger__bar { display: block; width: 20px; height: 2px; background-color: var(--text-primary); border-radius: 1px; transition: transform 0.25s ease, opacity 0.15s ease; } /* Active state — chiziqlar X shakliga keladi */ .header-burger.is-active .header-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-burger.is-active .header-burger__bar:nth-child(2) { opacity: 0; } .header-burger.is-active .header-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================ MOBILE DRAWER — slide-in panel from right ============================================================================ */ .mobile-drawer { position: fixed; inset: 0; z-index: 1100; /* yuqorida — loading_total_back (400) dan ham yuqori */ pointer-events: none; visibility: hidden; transition: visibility 0s linear 0.3s; } .mobile-drawer.is-open { pointer-events: auto; visibility: visible; transition: visibility 0s linear 0s; } .mobile-drawer__backdrop { position: absolute; inset: 0; z-index: 1; /* panel ostida */ background-color: rgba(17, 24, 39, 0.45); /* Orqa fon blur — drawer ochilganda sahifa kontenti xiralashadi */ backdrop-filter: blur(5px) saturate(110%); -webkit-backdrop-filter: blur(5px) saturate(110%); opacity: 0; transition: opacity 0.3s ease; cursor: pointer; } .mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; } .mobile-drawer__panel { position: absolute; top: 0; right: 0; z-index: 2; /* backdrop ustida — clicklar ishlaydi */ width: 280px; max-width: 85vw; height: 100vh; height: 100dvh; /* mobil brauzer paneli hisobga olinadi */ background-color: var(--bg-surface); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; /* swipe drag silliq bo'lsin (compositor) */ touch-action: pan-y; /* vertikal scroll ruxsat, gorizontal swipe'ni JS hal qiladi */ display: flex; flex-direction: column; padding: var(--space-lg) var(--space-md); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); } /* User info — drawer tepasi */ .mobile-drawer__user { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-md); } .mobile-drawer__avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background-color: var(--bg-muted); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 20px; flex-shrink: 0; } .mobile-drawer__user-name { font-size: 14px; font-weight: var(--font-semibold); color: var(--text-primary); overflow-wrap: break-word; /* DEV-3773 */ } /* Nav links */ .mobile-drawer__nav { display: flex; flex-direction: column; gap: 2px; } .mobile-drawer__link { display: flex; align-items: center; gap: var(--space-sm); padding: 12px var(--space-sm); background: transparent; color: var(--text-primary); font-size: 14px; font-weight: var(--font-medium); border: none; border-radius: var(--radius-md); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .mobile-drawer__link:hover { background-color: var(--bg-muted); } .mobile-drawer__link.is-active { background-color: var(--color-primary-light); color: var(--color-primary-active); } .mobile-drawer__link-icon { width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0; } .mobile-drawer__link-icon--notification { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.73%2021a2%202%200%200%201-3.46%200%22%2F%3E%3C%2Fsvg%3E"); } .mobile-drawer__link-icon--appeals { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2217%22%20x2%3D%228%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E"); } .mobile-drawer__link-icon--new { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E"); } .mobile-drawer__link-icon--faq { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E"); } .mobile-drawer__link.is-active .mobile-drawer__link-icon { filter: brightness(0) saturate(100%) invert(40%) sepia(91%) saturate(545%) hue-rotate(85deg) brightness(95%) contrast(92%); } .mobile-drawer__link-text { flex: 1 1 auto; } .mobile-drawer__link-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background-color: var(--color-danger); color: white; font-size: 11px; font-weight: var(--font-bold); border-radius: var(--radius-full); } /* Exit button — drawer pasti */ .mobile-drawer__exit { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; padding: 12px var(--space-sm); background: transparent; color: var(--color-danger); font-size: 14px; font-weight: var(--font-medium); border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--transition-fast); } .mobile-drawer__exit:hover { background-color: var(--bg-muted); } .mobile-drawer__exit-icon { width: 18px; height: 18px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpolyline%20points%3D%2216%2017%2021%2012%2016%207%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%229%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; flex-shrink: 0; } /* ============================================================================ MOBILE — barcha pagelar uchun umumiy responsive ============================================================================ */ @media (max-width: 768px) { header { height: var(--header-height-mobile); } header .container { padding-left: var(--space-md); padding-right: var(--space-md); gap: var(--space-sm); } .content-center-v { min-height: calc(100vh - var(--header-height-mobile) - 40px); padding: var(--space-lg) var(--space-md); } main { padding: var(--space-md) 0; } /* Logo — mobile'da kichikroq */ .logo { flex-shrink: 1; min-width: 0; height: 18px; } .logo__svg { height: 18px; max-width: 100%; } .logo img { height: 18px; max-width: 130px; width: auto; object-fit: contain; } /* Desktop menu va user — yashiramiz */ header .menu, .header-user { display: none !important; } /* Burger — ko'rsatamiz */ .header-burger { display: inline-flex; } /* Lang switcher — burger oldida (compact) */ .lang-switcher__current span:not(.lang-switcher__flag):not(.lang-switcher__label) { display: none; } .lang-switcher__current .lang-switcher__label { display: inline; margin-right: 4px; } .lang-switcher__current { padding: 0 6px; } .header-right { gap: 6px; flex-shrink: 0; } } @media (max-width: 480px) { .logo, .logo__svg, .logo img { height: 16px; max-width: 110px; } } /* Tablet — kichik laptoplar ham mobile menu ishlatishi mumkin */ @media (max-width: 1024px) and (min-width: 769px) { /* Menu desktop'da ko'rinadi, lekin tighter */ header .menu { gap: var(--space-sm); } } /* ============================================================================= 05/Button — Tugma komponenti ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .btn — asosiy tugma .btn-gray — kulrang variant (default) .btn-blue — ko'k (active filter) .btn-white — oq (default filter) .btn-filter — filter tugmasi (mobile) .btn-sorting — sorting tugmasi (mobile) .submit-btn — submit wrapper .add-announcement — yangi murojaat tugmasi (asosiy CTA) ========================================================================== */ /* ============================================================================ BAZA — .btn ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); height: var(--btn-height-md); padding: 0 var(--space-lg); font-family: var(--font-family-base); font-size: var(--font-base); font-weight: var(--font-medium); line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; background-color: var(--color-primary); color: var(--text-on-primary); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; user-select: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn:hover { background-color: var(--color-primary-hover); color: var(--text-on-primary); } .btn:active { background-color: var(--color-primary-active); transform: translateY(1px); } .btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; } .btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ============================================================================ VARIANTLAR ============================================================================ */ /* Kulrang — neytral default */ .btn-gray { background-color: var(--color-primary); color: var(--text-on-primary); } .btn-gray:hover { background-color: var(--color-primary-hover); } /* Ko'k — active filter / submit */ .btn-blue { background-color: var(--color-primary); color: var(--text-on-primary); } .btn-blue:hover { background-color: var(--color-primary-hover); } /* Oq — default filter */ .btn-white { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); } .btn-white:hover { background-color: var(--color-gray-50); border-color: var(--border-strong); color: var(--text-primary); } /* ============================================================================ O'LCHAMLAR (modifiers) ============================================================================ */ .btn--sm { height: var(--btn-height-sm); padding: 0 var(--space-md); font-size: var(--font-sm); } .btn--lg { height: var(--btn-height-lg); padding: 0 var(--space-xl); font-size: var(--font-lg); } .btn--full { width: 100%; } /* ============================================================================ MAXSUS TUGMALAR ============================================================================ */ /* "Yangi murojaat" katta CTA tugma */ .add-announcement { width: 100%; max-width: 400px; height: var(--btn-height-lg); font-size: var(--font-base); font-weight: var(--font-semibold); margin: 0 auto var(--space-lg); } /* Submit button — wrapper, input ichida bo'lishi mumkin */ .submit-btn { display: block; width: 100%; margin-top: var(--space-md); } .submit-btn input[type="submit"], .submit-btn .btn { width: 100%; height: var(--btn-height-lg); font-size: var(--font-base); font-weight: var(--font-semibold); } /* Filter / sorting (mobile-only odatda) */ .btn-filter, .btn-sorting { display: inline-flex; align-items: center; gap: var(--space-xs); height: var(--btn-height-md); padding: 0 var(--space-md); background-color: var(--color-gray-100); color: var(--text-primary); border: 1px solid var(--border-default); font-size: var(--font-sm); } .btn-filter:hover, .btn-sorting:hover { background-color: var(--color-gray-200); } /* History back (umumiy "orqaga" tugma) */ .history_back { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); font-size: var(--font-sm); color: var(--text-secondary); cursor: pointer; } .history_back:hover { color: var(--text-primary); } /* ============================================================================ LINK-VARIANT TUGMALAR ============================================================================ */ .dark-blue-link, .dark-blue-link-text, .gray-link { color: var(--text-link); font-weight: var(--font-medium); text-decoration: none; transition: color var(--transition-fast); cursor: pointer; } .dark-blue-link:hover, .dark-blue-link-text:hover { color: var(--text-link-hover); text-decoration: underline; } .gray-link { color: var(--text-secondary); } .gray-link:hover { color: var(--text-primary); } /* ============================================================================= 05/Input — Form input komponentlari ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .input-field — input wrapper (label + input) .input-item — search input .input-password — parol input wrapper .re-form-input — login/parol input .input-error__text — xato matn .input-success__text — muvaffaqiyat matni .eye-password — parolni ko'rsatish tugmasi .smart-captcha — captcha wrapper ========================================================================== */ /* ============================================================================ INPUT-FIELD — wrapper (label + input + helper) ============================================================================ */ .input-field { position: relative; display: flex; flex-direction: column; min-width: 0; /* DEV-3773: flex/grid ichida max-content'gacha cho'zilmasin */ max-width: 100%; margin-bottom: var(--space-md); } .input-field label { display: block; font-size: var(--font-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-xs); } /* Special: PHP'da label[placeholder] atributi bor */ .input-field label[placeholder]::before { content: attr(placeholder); } /* ============================================================================ BAZA INPUT — barcha turdagi inputlar ============================================================================ */ .input-field input[type="text"], .input-field input[type="email"], .input-field input[type="password"], .input-field input[type="number"], .input-field input[type="tel"], .input-field input[type="search"], .input-field input[type="url"], .input-field input[type="date"], .input-field input[type="time"], .input-field input[type="datetime-local"], .input-field select, .input-field textarea, .input-item, .re-form-input, input.input-item { width: 100%; height: var(--input-height-md); padding: 0 var(--space-md); font-family: var(--font-family-base); font-size: var(--font-base); font-weight: var(--font-regular); line-height: 1; color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); outline: none; appearance: none; } /* Textarea — baland balandlik */ .input-field textarea, textarea.input-item { height: auto; min-height: 100px; padding: var(--space-md); line-height: var(--leading-normal); resize: vertical; } /* Hover */ .input-field input:hover:not(:disabled), .input-field select:hover:not(:disabled), .input-field textarea:hover:not(:disabled), .input-item:hover:not(:disabled), .re-form-input:hover:not(:disabled) { border-color: var(--border-strong); } /* Focus */ .input-field input:focus, .input-field select:focus, .input-field textarea:focus, .input-item:focus, .re-form-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); } /* Disabled */ .input-field input:disabled, .input-field select:disabled, .input-field textarea:disabled, .input-item:disabled, .re-form-input:disabled { background-color: var(--color-gray-100); color: var(--text-muted); cursor: not-allowed; } /* Placeholder rangi */ .input-field input::placeholder, .input-field textarea::placeholder, .input-item::placeholder, .re-form-input::placeholder { color: var(--text-muted); } /* ============================================================================ IKONKALI INPUT — input boshida ikona PHP:

============================================================================ */ .input-field > span { position: relative; display: block; } /* Span ichida ikona bo'lsa, padding kerak */ .input-field > span::before { content: ''; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.6; pointer-events: none; } /* Login input — foydalanuvchi ikonkasi */ .input-field input[name="login"] { padding-left: calc(var(--space-md) * 2 + 20px); } .input-field span:has(input[name="login"])::before { background-image: url('/itilium/themes/img/icons/avatar.svg'); } /* Parol input — qulf ikonkasi */ .input-password input[type="password"], .input-password input[type="text"] { padding-left: calc(var(--space-md) * 2 + 20px); padding-right: calc(var(--space-md) * 2 + 20px); } /* ============================================================================ PASSWORD WRAPPER — eye toggle bilan PHP: ============================================================================ */ .input-password { position: relative; display: block; } .input-password::before { content: ''; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat; opacity: 0.6; /* Bu yerda qulf ikonkasi bo'lishi mantiqliroq — keyin almashtirish mumkin */ pointer-events: none; } /* Eye toggle button */ .eye-password { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat; opacity: 0.5; cursor: pointer; border: none; transition: opacity var(--transition-fast); z-index: 2; } .eye-password:hover { opacity: 0.8; } .eye-password.active { background-image: url('/itilium/themes/img/icons/eye-open.svg'); opacity: 1; } /* ============================================================================ SEARCH INPUT — qidiruv formasi Figma: - To'liq yumaloq (pill shape) - Chap tomonda kichik search ikona - Ko'rinmaydigan border (oddiy fon) - O'ng tomonda HECH NIMA (icons YO'Q) ============================================================================ */ .search { position: relative; display: flex; align-items: center; width: 100%; } .search .input-item { width: 100%; height: 44px; padding-left: 44px; padding-right: 44px; /* x ikona uchun joy */ font-family: var(--font-family-base); font-size: var(--font-sm); color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); /* 8px — boshqa komponentlar bilan bir xil */ transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .search .input-item:hover { border-color: var(--border-strong); } .search .input-item:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .search .input-item::placeholder { color: var(--text-muted); } /* Search icon — chap tomonda */ .search::before { content: ''; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url('/itilium/themes/img/icons/search.svg') center/contain no-repeat; opacity: 0.4; pointer-events: none; z-index: 2; } /* Clear va submit tugmalari — Figma'da YASHIRIN. PHP'da ular bor, lekin biz default'da yashiramiz va faqat matn yozsa ko'rsatamiz. Hozircha to'liq yashiramiz — Figma'da o'ng ikonkalar yo'q. */ .search-clear, .search-submit { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; } /* Input matn yozilganda — clear tugma ko'rsatamiz */ .search:has(.input-item:not(:placeholder-shown):not([value=""])) .search-clear { right: var(--space-md); width: 18px; height: 18px; opacity: 0.5; visibility: visible; pointer-events: auto; background-image: url('/itilium/themes/img/icons/close-mini.svg'); } .search-clear:hover { opacity: 1 !important; } /* ============================================================================ XATO / MUVAFFAQIYAT MATNLARI ============================================================================ */ .input-error__text { display: block; margin-top: var(--space-xs); font-size: var(--font-xs); color: var(--color-danger); min-height: 16px; } .input-success__text { display: block; margin-top: var(--space-xs); font-size: var(--font-xs); color: var(--color-success); min-height: 16px; } /* Input xato holatida */ .input-field.has-error input, .input-field.has-error select, .input-field.has-error textarea, .input-field input.error, .input-error input { border-color: var(--border-danger); } .input-field.has-error input:focus, .input-error input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } /* ============================================================================ SELECT — chosen.js bilan ishlatiladi, lekin biz bazasini ham yaxshilab beramiz ============================================================================ */ .input-field select { background-image: url('/itilium/themes/img/icons/arrow-down.svg'); background-position: right var(--space-md) center; background-repeat: no-repeat; background-size: 16px; padding-right: calc(var(--space-md) * 2 + 16px); } /* ============================================================================ FILE UPLOAD PHP: .fl_inp, .fl_nm_container, .fl_upld ============================================================================ */ .fl_upld { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background-color: var(--bg-surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition-fast); } .fl_upld:hover { border-color: var(--border-focus); } .fl_inp { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .fl_nm_container { font-size: var(--font-sm); color: var(--text-secondary); } /* ============================================================================ CAPTCHA ============================================================================ */ .smart-captcha { margin: var(--space-md) 0; } /* ============================================================================= 05/Checkbox — Checkbox va radio ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .checkbox — checkbox wrapper .checkbox-icon — custom checkbox ikona .modal__checkbox — modal ichidagi checkbox (radio) .modal__checkbox-icon — modal checkbox ikonkasi ========================================================================== */ /* ============================================================================ CHECKBOX — asosiy PHP:
============================================================================ */ .checkbox { display: flex; align-items: center; margin-bottom: var(--space-md); } .checkbox label { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; font-size: var(--font-sm); color: var(--text-primary); } /* Asl checkbox'ni yashirish */ .checkbox input[type="checkbox"], .modal__checkbox input[type="checkbox"], .modal__checkbox input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Custom checkbox icon */ .checkbox-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--bg-surface); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); transition: background-color var(--transition-fast), border-color var(--transition-fast); } /* Checked holat — yashil fon + OQ tick (Figma'dagi kontrast) */ .checkbox input[type="checkbox"]:checked + .checkbox-icon { background-color: var(--color-primary); border-color: var(--color-primary); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px; } /* Hover */ .checkbox label:hover .checkbox-icon { border-color: var(--color-primary); } /* Focus */ .checkbox input[type="checkbox"]:focus-visible + .checkbox-icon { box-shadow: var(--shadow-focus); } /* Disabled */ .checkbox input[type="checkbox"]:disabled + .checkbox-icon { opacity: 0.5; cursor: not-allowed; } /* ============================================================================ MODAL CHECKBOX (radio sifatida ishlatiladi) PHP:
============================================================================ */ .modal__checkbox { margin-bottom: var(--space-sm); } .modal__checkbox label { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--transition-fast); user-select: none; font-size: var(--font-base); color: var(--text-primary); } .modal__checkbox label:hover { background-color: var(--color-gray-100); } .modal__checkbox-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--bg-surface); border: 2px solid var(--border-strong); border-radius: var(--radius-full); transition: background-color var(--transition-fast), border-color var(--transition-fast); } /* Radio checked - ichida nuqta */ .modal__checkbox input[type="radio"]:checked + .modal__checkbox-icon { border-color: var(--color-primary); background-color: var(--bg-surface); } .modal__checkbox input[type="radio"]:checked + .modal__checkbox-icon::after { content: ''; width: 10px; height: 10px; background-color: var(--color-primary); border-radius: var(--radius-full); } /* Checkbox in modal (kvadrat) — yashil fon + OQ tick */ .modal__checkbox input[type="checkbox"]:checked + .modal__checkbox-icon { background-color: var(--color-primary); border-color: var(--color-primary); border-radius: var(--radius-sm); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px; } /* ============================================================================= 05/Card — Card komponentlari ----------------------------------------------------------------------------- Figmadan: oq fon, kulrang border, hover'da yashil border + arrow rangli. Har kartochka o'ng tomonda → arrow ikona bilan. ========================================================================== */ /* ============================================================================ MAIN FORM (Login formasi) ============================================================================ */ .main-form { width: 100%; max-width: 440px; padding: var(--space-2xl); background-color: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin: 0 auto; } .main-form h3 { text-align: center; font-size: var(--font-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-sm); color: var(--text-primary); } .main-form__down { text-align: center; margin-top: var(--space-md); font-size: var(--font-sm); color: var(--text-secondary); } /* ============================================================================ TEMPLATES GRID — kategoriyalar va shablonlar (Figma'dagi 3-column) ---------------------------------------------------------------------------- PHP:
(ixtiyoriy)
Title
Subtitle
============================================================================ */ .templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); } @media (max-width: 1024px) { .templates { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .templates { grid-template-columns: 1fr; } } .template, .category { position: relative; display: flex; align-items: center; gap: var(--space-md); padding: 18px; /* Figma: barcha tomondan 18px */ padding-right: 56px; /* arrow uchun joy (32px button + margin) */ background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* Figma: X0 Y3 Blur8 Spread0 #000 8% */ text-decoration: none; color: var(--text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); cursor: pointer; min-height: 60px; } /* Karta ikonkasi — 1C'dan kelgan umumiy "i" rasm o'rniga doimiy file-icon SVG */ .template img, .category img, .template .card-icon, .category .card-icon { width: 20px; height: 24px; object-fit: contain; flex-shrink: 0; margin: 0; /* Ikonka har doim vertikal markazda — subcategory'da karta align-items:flex-start bo'lsa ham (comment 2 qatorli bo'lganda ham) ikonka markazda tursin. */ align-self: center; } /* Karta ikonkasi — Figma'da YOK (faqat agar PHP bersa ko'rsatiladi) */ .template::before, .category::before { display: none; } /* Arrow ikonasi — o'ng tomonda, kichik tugma stilida (Figma'dagi kabi) Box: 32x32 light gray bg, rounded Icon: User bergan 15x12 arrow SVG (Lucide arrow-right stilida) */ .template::after, .category::after { content: ''; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background-color: var(--color-gray-100); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0.75%205.75H14.0833M9.08333%2010.75L14.0833%205.75L9.08333%200.75%22%20stroke%3D%22%233B82F6%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 15px 12px; border-radius: var(--radius-sm); transition: background-color var(--transition-fast), transform var(--transition-fast); } /* Hover holati — nozik yashil border (1.5px effective) */ .template:hover, .category:hover { border-color: var(--color-primary); color: var(--text-primary); /* 1px border + 0.5px box-shadow = effektiv 1.5px nozik border, + asosiy drop shadow (hover'da yo'qolib qolmasin) */ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px var(--color-primary); } .template:hover::after, .category:hover::after { background-color: var(--color-primary-light); transform: translateY(-50%) translateX(2px); } .template:hover::before, .category:hover::before { opacity: 1; } /* Selected holat — bir xil ko'rinish */ .template.is-selected, .category.is-selected, .template.active, .category.active { border-color: var(--color-primary); box-shadow: 0 0 0 0.5px var(--color-primary); } /* Selected/Active holat — Figmada yashil ring */ .template.is-selected, .category.is-selected, .template.active, .category.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-primary-light); } /* Card content */ .template .text, .category .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; /* truncate uchun */ } .template .name, .category .name { font-size: var(--font-md); font-weight: var(--font-regular); /* Figma: card title 400 (qalin emas) */ color: var(--text-primary); line-height: var(--leading-snug); } .template .comment, .category .comment { font-size: var(--font-xs); color: var(--text-secondary); line-height: var(--leading-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ SLIDER — Mass appeals (slick carousel) ============================================================================ */ .sliders { margin-bottom: var(--space-xl); } .slider { padding: var(--space-lg); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); margin-right: var(--space-md); cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .slider:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .slider .topic { font-size: var(--font-md); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); line-height: var(--leading-snug); } .slider .text { margin-bottom: var(--space-sm); } .slider .text:last-child { margin-bottom: 0; } .slider .label { font-size: 11px; font-weight: var(--font-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .slider .value { font-size: var(--font-sm); color: var(--text-primary); line-height: var(--leading-normal); } .slider .fixh { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .slider-modal-copy-container { display: none; } /* ============================================================================ SLICK SLIDER OVERRIDES ============================================================================ */ .slick-slider { position: relative; } .slick-list { overflow: hidden; } .slick-track { display: flex; } .slick-slide > div { height: 100%; } .slick-slide .slider { height: 100%; } .slick-dots { display: flex !important; justify-content: center; gap: var(--space-xs); margin-top: var(--space-md); padding: 0; } .slick-dots li { list-style: none; } .slick-dots button { width: 8px; height: 8px; padding: 0; border-radius: var(--radius-full); background-color: var(--color-gray-300); font-size: 0; border: none; cursor: pointer; transition: background-color var(--transition-fast); } .slick-dots .slick-active button { background-color: var(--color-primary); width: 24px; } /* ============================================================================ VERSIYA matni ============================================================================ */ .version { text-align: center; font-size: var(--font-xs); color: var(--text-muted); margin-top: var(--space-xl); line-height: var(--leading-relaxed); } .version b { font-weight: var(--font-semibold); color: var(--text-secondary); } /* ============================================================================ PAGE TEMPLATE wrapper ============================================================================ */ .page_template { padding: var(--space-lg) 0; } .page_template h3 { margin-bottom: var(--space-md); font-size: var(--font-xl); font-weight: var(--font-semibold); color: var(--text-primary); } /* ============================================================================= 05/Notification — Notifications, ticket cards, alerts ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .notification — asosiy notification konteyner .notification-item — notification ichidagi item .notification-card — murojaat karta .notification-card__abbreviated — qisqartilgan ko'rinish .notification-number — Obrasheniye № .notification-title — sarlavha .notification-info / __list / __top — ma'lumotlar bloki .notification-info__btn — ma'lumotlar tugmasi .notification-status — holat indikatori .notification-status__registered — registered holat .notification-comment — komment maydon .notification-correspondence — yozishma .notification-document / __list — fayl ilovalari .notification-approve / -cancel — tasdiqlash tugmalari .notification-preview — preview .notification-read-all — hammasini o'qish .notification-user / __author / __date — user info .card-abbreviated-control — toggle button .attantion — alert ikona ========================================================================== */ /* ============================================================================ NOTIFICATION — bazaviy konteyner PHP:
...
============================================================================ */ .notification { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-md); overflow: hidden; } .notification-item { padding: var(--space-lg); border-bottom: 1px solid var(--border-default); } .notification-item:last-child { border-bottom: none; } /* Alert / xato variant — qizil chiziq chap tomonda */ .notification:has(p[style*="color:red"]), .notification:has(.attantion) { border-left: 4px solid var(--color-danger); } /* Alert icon */ .attantion { display: inline-block; width: 18px; height: 18px; vertical-align: middle; margin-right: var(--space-xs); background: url('/itilium/themes/img/icons/attantion.svg') center/contain no-repeat; } /* ============================================================================ NOTIFICATION CARD — ticket detail PHP:
============================================================================ */ .notification-card { position: relative; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); overflow: hidden; transition: border-color var(--transition-fast); } .notification-card .notification-item { padding: var(--space-lg); } /* Qisqartilgan ko'rinish — collapse mumkin */ .notification-card__abbreviated .notification-item { position: relative; max-height: 200px; overflow: hidden; transition: max-height var(--transition-base); } .notification-card__abbreviated.is-expanded .notification-item { max-height: none; } .notification-card__abbreviated:not(.is-expanded) .notification-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--bg-surface)); pointer-events: none; } /* Toggle control */ .card-abbreviated-control { position: absolute; right: var(--space-md); top: var(--space-md); width: 32px; height: 32px; background-color: var(--bg-muted); background-image: url('/itilium/themes/img/icons/down.svg'); background-position: center; background-repeat: no-repeat; background-size: 16px; border: none; border-radius: var(--radius-full); cursor: pointer; z-index: 2; transition: background-color var(--transition-fast), transform var(--transition-fast); } .card-abbreviated-control:hover { background-color: var(--color-gray-200); } .notification-card__abbreviated.is-expanded .card-abbreviated-control { transform: rotate(180deg); } /* ============================================================================ NOTIFICATION CONTENT — sarlavha, raqam, matn ============================================================================ */ .notification-number { font-size: var(--font-xs); font-weight: var(--font-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-xs); } .notification-title { font-size: var(--font-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-md); line-height: var(--leading-snug); } .notification-card .text { font-size: var(--font-base); color: var(--text-primary); line-height: var(--leading-normal); margin-bottom: var(--space-md); } /* ============================================================================ NOTIFICATION INFO — qo'shimcha ma'lumotlar PHP: ============================================================================ */ .notification-info { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-default); } .notification-info__top { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); } .notification-info__list { list-style: none; padding: 0; margin: 0; } .notification-info__list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-default); } .notification-info__list li:last-child { border-bottom: none; } .notification-info__list p { margin: 0; font-size: var(--font-sm); color: var(--text-primary); line-height: var(--leading-normal); } .notification-info__list b { font-weight: var(--font-semibold); color: var(--text-secondary); margin-right: var(--space-xs); } /* Info button */ .notification-info__btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background-color: var(--bg-muted); border-radius: var(--radius-full); font-size: var(--font-xs); color: var(--text-secondary); cursor: pointer; transition: background-color var(--transition-fast); } .notification-info__btn:hover { background-color: var(--color-gray-200); } .notification-info__btn_text { font-weight: var(--font-medium); } /* ============================================================================ STATUS — holat indikatori ============================================================================ */ .notification-status { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-0-5) var(--space-sm); background-color: var(--bg-muted); color: var(--text-secondary); border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--font-medium); } .notification-status__registered { background-color: var(--color-info-bg); color: var(--color-info-text); } /* Boshqa status variantlari */ .notification-status--open { background-color: var(--color-success-bg); color: var(--color-success-text); } .notification-status--closed { background-color: var(--color-gray-200); color: var(--color-gray-700); } .notification-status--warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); } /* ============================================================================ USER INFO — author, date ============================================================================ */ .notification-user { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-sm); color: var(--text-secondary); } .notification-user__author { font-weight: var(--font-medium); color: var(--text-primary); } .notification-user__date { color: var(--text-muted); font-size: var(--font-xs); } /* ============================================================================ COMMENTS — komment maydoni ============================================================================ */ .notification-comment { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-default); } .notification-comment__field { width: 100%; min-height: 80px; padding: var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-family-base); font-size: var(--font-base); resize: vertical; } .notification-comment__field:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; } .notification-comment__item { padding: var(--space-md); background-color: var(--bg-muted); border-radius: var(--radius-md); margin-bottom: var(--space-sm); } .notification-comment__submit { margin-top: var(--space-sm); } /* ============================================================================ CORRESPONDENCE — yozishma (chat-like) ============================================================================ */ .notification-correspondence, .correspondence { margin-top: var(--space-md); } .correspondence-row { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); } .correspondence-item { flex: 1; padding: var(--space-md); background-color: var(--bg-muted); border-radius: var(--radius-md); } .correspondence-author { font-weight: var(--font-semibold); color: var(--text-primary); font-size: var(--font-sm); margin-bottom: var(--space-xs); } .correspondence-date { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: var(--space-xs); } /* ============================================================================ DOCUMENTS — fayl ilovalari ============================================================================ */ .notification-document { margin-top: var(--space-md); } .notification-document__list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; padding: 0; } .notification-document__list li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background-color: var(--bg-muted); border-radius: var(--radius-md); font-size: var(--font-sm); } .notification-document__list li::before { content: ''; display: inline-block; width: 20px; height: 20px; background: url('/itilium/themes/img/icons/file-blue.svg') center/contain no-repeat; flex-shrink: 0; } /* ============================================================================ APPROVE/CANCEL — tasdiqlash tugmalari ============================================================================ */ .notification-approve, .notification-approve-cancel, .notification-cancel, .notification-confirm { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--transition-fast); border: 1px solid transparent; } .notification-approve { background-color: var(--color-success); color: var(--color-white); } .notification-approve:hover { background-color: var(--color-success-text); } .notification-cancel, .notification-approve-cancel { background-color: var(--bg-surface); color: var(--color-danger); border-color: var(--color-danger); } .notification-cancel:hover, .notification-approve-cancel:hover { background-color: var(--color-danger-bg); } .notification-confirm { background-color: var(--color-primary); color: var(--text-on-primary); } /* ============================================================================ PREVIEW / READ ALL ============================================================================ */ .notification-preview { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-normal); } .notification-read-all { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background-color: transparent; color: var(--text-link); font-size: var(--font-sm); font-weight: var(--font-medium); cursor: pointer; border: none; } .notification-read-all:hover { color: var(--text-link-hover); } /* ============================================================================= 05/Modal — Modal va big modal komponentlari ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .modal — kichik modal .filter__modal — filter modal (mobile) .sorting__modal — sorting modal (mobile) .sorting__modal-btn — sort tugmalari .sort-btn — sort tugmasi .sort-descending — pasayuvchi .sort-regrowth — o'suvchi #bigmodal — katta modal (footer.php'da) .bigmodal-back — orqaga tugma .bigmodal-close — yopish tugma ========================================================================== */ /* ============================================================================ .modal — kichik fancybox modallar (confirm/reject/approve dialoglar) Eski style.css'da display:none edi, redesign'da yo'q. Fancybox tomonidan ochilganda inline style bilan ko'rinadi. ============================================================================ */ .modal { display: none; } /* Fancybox modallarni ko'rsatganda — display: block bilan tabletkalik holatga */ .fancybox-content .modal, .fancybox-slide .modal { display: block; } /* ============================================================================ BIGMODAL — to'liq ekran modal PHP:
============================================================================ */ #bigmodal { position: fixed; inset: 0; background-color: var(--bg-overlay); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-md); overflow-y: auto; } /* Body class — bigmodal ochiq holatini bildiradi */ body.bigmodal { overflow: hidden; } body.bigmodal #bigmodal { display: flex; animation: fadeIn var(--transition-base); } #bigmodal .border { position: relative; width: 100%; max-width: 600px; max-height: 90vh; background-color: var(--bg-surface); border-radius: var(--radius-xl); padding: var(--space-2xl); overflow-y: auto; animation: slideUp var(--transition-base); } /* Back and close buttons (SVG ichida) */ .bigmodal-back, .bigmodal-close { position: absolute; top: var(--space-md); width: 36px; height: 36px; padding: var(--space-sm); background-color: var(--bg-muted); border: none; border-radius: var(--radius-full); cursor: pointer; z-index: 2; transition: background-color var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .bigmodal-back { left: var(--space-md); } .bigmodal-close { right: var(--space-md); } .bigmodal-back svg, .bigmodal-close svg { width: 16px; height: 16px; } .bigmodal-back path, .bigmodal-close path { fill: var(--text-secondary); transition: fill var(--transition-fast); } .bigmodal-back:hover, .bigmodal-close:hover { background-color: var(--color-gray-200); } .bigmodal-back:hover path, .bigmodal-close:hover path { fill: var(--text-primary); } #bigmodal .content { margin-top: var(--space-xl); margin-bottom: var(--space-lg); } #bigmodal .bottom { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-default); } /* Big modal container — agar body bigmodal_container bo'lsa, joriy sahifa modal'da ochilgan */ body.bigmodal_container { background-color: transparent; } body.bigmodal_container .wrapper { background-color: transparent; min-height: auto; } /* ============================================================================ FILTER VA SORTING MODAL (mobile filter) PHP: Bu yashirin elementlar — JS orqali bigmodal'da ko'rsatiladi ============================================================================ */ .filter__modal, .sorting__modal { padding: var(--space-md); } .filter__modal h3, .sorting__modal h3 { font-size: var(--font-lg); margin-bottom: var(--space-md); } .sorting__modal-btn { display: flex; gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-default); } .sort-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-height-md); padding: 0 var(--space-md); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--font-sm); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .sort-btn:hover { border-color: var(--border-strong); } .sort-btn.active { background-color: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-active); } .sort-descending::before { content: '↓'; margin-right: var(--space-xs); font-weight: bold; } .sort-regrowth::before { content: '↑'; margin-right: var(--space-xs); font-weight: bold; } /* ============================================================================ ANIMATSIYALAR ============================================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ MOBILE ============================================================================ */ @media (max-width: 640px) { #bigmodal { padding: 0; } #bigmodal .border { max-width: 100%; max-height: 100vh; border-radius: 0; padding: var(--space-lg) var(--space-md); } } /* ============================================================================ BIGMODAL — IFRAME REJIMI ---------------------------------------------------------------------------- "Поиск решений" va "FAQ" endi alohida sahifa emas, shu sahifadagi modal ichida ochiladi (main.js: openItiliumBigmodal). Sabab: avval bu bo'limlarga o'tilganda to'ldirilgan murojaat formasi yo'qolardi. .is-open klassi SHART: create.css'da body:has(.create-page) #bigmodal:not([style*="flex"]):not(.is-open) { display: none !important } qoidasi bor (select AJAX'ida overlay qotib qolmasin uchun). Modal aynan shu klass bilan ochiladi. ============================================================================ */ #bigmodal.is-open { display: flex; } /* Modal qutisi — balandligi belgilangan, scroll IFRAME ichida bo'ladi */ #bigmodal.is-open .border { max-width: 860px; height: min(88vh, 900px); padding: var(--space-xl); display: flex; flex-direction: column; overflow: hidden; } #bigmodal .bigmodal-title { flex: 0 0 auto; /* o'ngda yopish, chapda orqaga tugmasi turadi — matn ular ustiga chiqmasin */ margin: 0 44px; font-size: var(--font-lg); font-weight: var(--font-semibold); color: var(--text-primary); line-height: 1.3; text-align: center; min-height: 20px; overflow-wrap: break-word; } #bigmodal.is-open .content { flex: 1 1 auto; min-height: 0; margin-bottom: 0; } /* Sarlavha bor paytda content'ning tepa masofasi kichrayadi (ID borligi uchun bu selektor #bigmodal .content dan kuchliroq) */ #bigmodal .bigmodal-title + .content { margin-top: var(--space-md); } #bigmodal.is-open .bottom { display: none; } #bigmodal .bigmodal-frame { display: block; width: 100%; height: 100%; border: 0; background-color: var(--bg-surface); } /* iframe ICHIDAGI sahifa (main.js body'ga .in-bigmodal qo'shadi). Sahifaning o'z sarlavhasi va "orqaga" strelkasi JS'da yashiriladi — ular o'rniga modalning o'z sarlavhasi va tugmalari ishlaydi. */ body.in-bigmodal .faq-page, body.in-bigmodal .solutions-page { padding-top: 0; } body.in-bigmodal .faq-page__header, body.in-bigmodal .solutions-page__header { margin-top: 0; } @media (max-width: 640px) { /* Mobil / WebView — modal butun ekranni egallaydi */ #bigmodal.is-open .border { max-width: 100%; height: 100vh; border-radius: 0; padding: var(--space-lg) var(--space-md); } #bigmodal .bigmodal-title { margin: 0 40px; font-size: var(--font-md); } } /* ============================================================================= 05/Menu — Navigation menu komponentlari ----------------------------------------------------------------------------- Mavjud klasslar (PHP'da): .menu — Asosiy navigatsiya menyu (header ichida) .menu-back — Orqaga tugma .menu-home — Bosh sahifa .menu-notification — Bildirishnomalar .menu-appeals — Murojaatlar .menu-new — Yangi murojaat .menu-count — Notification soni (badge) .header-user — Foydalanuvchi paneli .header-user__icon — Foydalanuvchi avatar .login / .output — Login / chiqish linklari .appeals-top — Sahifa yuqori menyu .title-button-back — Sarlavhada orqaga tugma ========================================================================== */ /* ============================================================================ ASOSIY MENU — header ichida PHP: ============================================================================ */ .menu { display: flex; align-items: center; gap: var(--space-md); list-style: none; padding: 0; margin: 0; } .menu li { position: relative; } .menu a { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm); color: var(--text-secondary); font-size: var(--font-sm); font-weight: var(--font-regular); /* Figma: 400 default/hover/active barchasida */ text-decoration: none; background-color: transparent; transition: color var(--transition-fast); } .menu a:hover { background-color: transparent; color: var(--color-primary); font-weight: var(--font-regular); /* Figma: hover'da ham 400 */ } /* Active state — Figma'da faqat yashil matn (underline YO'Q, font-weight o'zgarmaydi) */ .menu li.active a { background-color: transparent; color: var(--color-primary); font-weight: var(--font-regular); /* Figma: active'da ham 400 */ } /* Active'da underline YO'Q (Figmaga moslangan) */ .menu li.active a::after { display: none; } /* Menyu ikonkalari — Figma'da ikona YO'Q, faqat matn */ /* Agar ikona kerak bo'lsa, qaytarish uchun comment'dan chiqaring */ .menu a::before { display: none; } /* Backga'lik tugmasi (alohida) — User bergan 14x14 SVG (Lucide arrow-left) */ .menu-back::before { display: inline-block; content: ''; width: 18px; height: 18px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat; opacity: 0.6; } /* Notification count badge */ .menu-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-xs); margin-left: var(--space-xs); background-color: var(--color-danger); color: var(--color-white); font-size: 10px; font-weight: var(--font-bold); border-radius: var(--radius-full); line-height: 1; } .menu-count:empty, .menu-count:has(:empty) { display: none; } /* ============================================================================ HEADER USER — yuqori o'ng burchakdagi foydalanuvchi paneli PHP:
============================================================================ */ .header-user { position: relative; display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } /* Username matni — avatardan oldin (Figmadagi kabi) */ .header-user__name { font-size: var(--font-sm); color: var(--text-primary); font-weight: var(--font-medium); white-space: nowrap; } .header-user__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: url('/itilium/themes/img/icons/avatar-user.svg') center/20px no-repeat var(--bg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-full); cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; color: inherit; outline: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .header-user__icon:hover { background-color: var(--color-gray-200); border-color: var(--border-strong); } .header-user__icon:focus-visible { box-shadow: var(--shadow-focus); } /* ============================================================================ USER DROPDOWN MENU — yangi klass (.hidden konflikti yo'qotildi) PHP:
============================================================================ */ .header-user__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: var(--space-xs); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); flex-direction: column; gap: 2px; } .header-user.is-open .header-user__menu { display: flex; animation: dropdownFade var(--transition-fast); } /* Username — birinchi qator (bold, alohida bo'lim) */ .header-user__menu-login { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--font-sm); font-weight: var(--font-semibold); color: var(--text-primary); border-bottom: 1px solid var(--border-default); margin-bottom: 2px; cursor: default; user-select: none; } /* "Выйти" — qizil rangda */ .header-user__menu-exit { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--font-sm); font-weight: var(--font-medium); color: var(--color-danger); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .header-user__menu-exit:hover { background-color: var(--color-danger-bg); color: var(--color-danger); } /* Eski .hidden klassi uchun — fallback (PHP boshqa joylarda ham ishlatadi) */ .header-user .hidden { display: none !important; } /* Avatar bosilganda chiroyli ko'rinish */ .header-user__icon { position: relative; } .header-user.is-open .header-user__icon { background-color: var(--bg-muted); border-color: var(--color-primary); } /* ============================================================================ APPEALS-TOP — sahifa yuqori filter/sort paneli PHP:
...
OR Back
filter buttons
filter button
============================================================================ */ .appeals-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; margin-bottom: var(--space-lg); } .appeals-top .search { flex: 1; min-width: 280px; } .appeals-top__btn__desktop { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .appeals-top__btn__desktop .btn { height: 36px; padding: 0 var(--space-md); font-size: var(--font-sm); border-radius: var(--radius-full); } .appeals-top__btn__mobile { display: none; gap: var(--space-sm); } @media (max-width: 768px) { .appeals-top__btn__desktop { display: none; } .appeals-top__btn__mobile { display: flex; } .appeals-top { flex-direction: column; align-items: stretch; } } /* ============================================================================ TITLE BUTTON BACK — sarlavhada orqaga tugma PHP: .title-button-back, .title-button-back-breadcrumbs, .title-button-back-title ============================================================================ */ .title-button-back { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .title-button-back-breadcrumbs { flex: 1; font-size: var(--font-sm); color: var(--text-secondary); } .title-button-back-title { font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); } /* ============================================================================ MOBILE — kichik ekranlarda menyu ============================================================================ */ @media (max-width: 768px) { .menu { gap: 0; } .menu a { padding: var(--space-sm); font-size: 0; /* Matnni yashirish, faqat ikona */ } .menu a::before { margin-right: 0; width: 24px; height: 24px; } /* Notification badge ham yuqorida */ .menu-count { position: absolute; top: -4px; right: -4px; margin-left: 0; } } @keyframes dropdownFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================= 05/Pagination — Figma design system komponenti ----------------------------------------------------------------------------- HTML structure (HelperClasses::page() chiqaradi): ========================================================================== */ /* Pagination HAR DOIM x o'qi bo'yicha markazda turishi kerak. Ilgari `inline-flex` edi — u holda joylashuv butunlay ota-elementga bog'liq bo'lib qolardi: .faq-pagination/.solutions-pagination o'zida `justify-content:center` bergani uchun markazda, ammo .appeals-pagination, .notifications-pagination va klasssiz `div[style="margin-bottom:2rem"]` o'ramlarida (home/template/templateCategories) chap chekkada qolardi. Markazlashtirishni komponentning o'ziga ko'chirdik — shunda hamma chaqiruv joyi, shu jumladan AJAX bilan qayta render bo'ladigan ro'yxatlar ham, hech qanday o'ram CSS'isiz to'g'ri turadi. */ .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; user-select: none; } /* ============================================================================ PAGINATION BUTTON — har bir element bir xil width/height ============================================================================ */ .pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background-color: transparent; color: var(--text-primary); font-family: var(--font-family-base); font-size: 13px; font-weight: var(--font-medium); text-decoration: none; border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } /* Hover (inactive button) */ .pagination__btn:hover:not(.is-active):not(.is-disabled) { background-color: var(--bg-muted); color: var(--text-primary); } /* ACTIVE — yashil border (Figma) */ .pagination__btn.is-active { background-color: var(--bg-surface); color: var(--color-primary); border-color: var(--color-primary); font-weight: var(--font-semibold); cursor: default; } /* DISABLED — bo'sh, click qilib bo'lmaydigan */ .pagination__btn.is-disabled { color: var(--text-muted); cursor: not-allowed; pointer-events: none; opacity: 0.4; } /* ============================================================================ ARROW BUTTONS — Prev / Next (chevron iconlar) ============================================================================ */ .pagination__btn--prev, .pagination__btn--next { min-width: 32px; width: 32px; padding: 0; font-size: 0; color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 16px; } /* Prev arrow — chevron left (yashil) */ .pagination__btn--prev { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%2018%209%2012%2015%206%22%2F%3E%3C%2Fsvg%3E"); } /* Next arrow — chevron right (yashil) */ .pagination__btn--next { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E"); } /* Disabled arrows — kulrang */ .pagination__btn--prev.is-disabled { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%2018%209%2012%2015%206%22%2F%3E%3C%2Fsvg%3E"); } .pagination__btn--next.is-disabled { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E"); } /* Arrow hover — biroz to'qroq fon */ .pagination__btn--prev:hover:not(.is-disabled), .pagination__btn--next:hover:not(.is-disabled) { background-color: var(--bg-muted); } /* ============================================================================ ELLIPSIS — "..." (uchta nuqta) ============================================================================ */ .pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; color: var(--text-muted); font-size: 13px; font-weight: var(--font-medium); letter-spacing: 1px; pointer-events: none; user-select: none; } /* ============================================================================ LEGACY support — eski pagination markup uchun (agar kerak bo'lsa) ============================================================================ */ .pagination > a:not([class]), .pagination > span:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: var(--font-medium); text-decoration: none; border: 1.5px solid transparent; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .pagination > a:not([class]):hover { background-color: var(--bg-muted); } .pagination > span:not([class]) { color: var(--color-primary); border-color: var(--color-primary); font-weight: var(--font-semibold); } .pagination > a[disabled] { color: var(--text-muted); pointer-events: none; opacity: 0.4; } /* ============================================================================ MOBILE — kichikroq button'lar ============================================================================ */ @media (max-width: 640px) { .pagination { gap: 2px; } .pagination__btn, .pagination__ellipsis { min-width: 28px; height: 28px; font-size: 12px; } .pagination__btn--prev, .pagination__btn--next { width: 28px; background-size: 14px; } } /* ============================================================================= 06/Pages — Login (entry.php) — YANGI FIGMA DIZAYNI ----------------------------------------------------------------------------- Yangi dizayn (web uchun moslash): - Background: off-white + ikki burchakda yashil pattern (SVG, opacity 0.06) - Logo: header'da yuqorida (yoki yo'q — logo card'dan yuqorida turadi) - Card: oq, rounded, subtle shadow — Xush Kelibsiz + inputs + Kirish tugma - Card TASHQARISIDA (pastida): "Meni eslab qolish" checkbox + Til tanlash - Error state: red border + red text ostida ("Login xato kiritildi") ========================================================================== */ /* ============================================================================ BODY — off-white background, dekoratsiya joyi ============================================================================ */ body.page-login, body:has(.main-form#entry) { position: relative; background-color: #FFFFFF; min-height: 100vh; overflow-x: hidden; } /* YASHIL ATMOSFERIK GLOW — yuqori va pastda, Figmadagidek ::before — TOP green glow (yengil, dekorativ SVG ortida) ::after — BOTTOM green glow (yumshoq, balandroq doirasimon gradient) */ body.page-login::before, body:has(.main-form#entry)::before { content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 1400px; height: 500px; background: radial-gradient( ellipse at center top, rgba(24, 184, 60, 0.10) 0%, rgba(24, 184, 60, 0.05) 30%, rgba(24, 184, 60, 0.02) 55%, rgba(24, 184, 60, 0) 75% ); pointer-events: none; z-index: 0; } body.page-login::after, body:has(.main-form#entry)::after { content: ''; position: fixed; bottom: -250px; left: 50%; transform: translateX(-50%); width: 1600px; height: 600px; background: radial-gradient( ellipse at center bottom, rgba(24, 184, 60, 0.14) 0%, rgba(24, 184, 60, 0.07) 30%, rgba(24, 184, 60, 0.025) 55%, rgba(24, 184, 60, 0) 80% ); pointer-events: none; z-index: 0; } body.page-login > .wrapper, body:has(.main-form#entry) > .wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* ============================================================================ DEKORATIV BURCHAK SVG'LARI — Figma dizayni Chap yuqori va o'ng yuqori burchaklarda yashil pattern. Shakl YO'NALISHI: burchakdan INWARD (markazga) qaragan — chevron'lar burchakda joylashib markazga "ochiladi" ============================================================================ */ .login-deco { position: fixed; top: 0; width: 280px; height: 280px; pointer-events: none; user-select: none; z-index: 0; opacity: 0.55; /* Yashil glow bilan birga — yengil ko'rinish */ } /* CHAP yuqori — shakl burchakdan markazga (pastga-o'ngga) ochilsin */ .login-deco--left { left: 0; /* Natural SVG ko'rinishi yuqori-o'ngga yo'nalgan — uni FLIP qilamiz vertikal (scaleY -1) qilib pastga-o'ngga aylantirish */ transform: scaleY(-1); } /* O'NG yuqori — chap'dan mirror (horizontalda flip) */ .login-deco--right { right: 0; transform: scaleY(-1) scaleX(-1); /* = rotate(180deg) */ } .login-deco svg { display: block; width: 100%; height: 100%; } /* ============================================================================ HEADER — login (autentifikatsiyasiz: logo markazda, card'dan tepada) ============================================================================ */ body.page-login header.header-shortcut, body:has(.main-form#entry) header.header-shortcut { background: transparent; border: none; box-shadow: none; position: relative; z-index: 2; height: auto; padding: 64px 0 0; } body.page-login header.header-shortcut .container, body:has(.main-form#entry) header.header-shortcut .container { justify-content: center; } body.page-login .logo, body:has(.main-form#entry) .logo { display: inline-flex; pointer-events: none; /* login sahifada logo bosilmaydi */ } body.page-login .logo img, body:has(.main-form#entry) .logo img { height: 32px; } /* ============================================================================ MAIN — markazda content ============================================================================ */ body.page-login main, body:has(.main-form#entry) main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px var(--space-md) var(--space-xl); position: relative; z-index: 1; } body.page-login .content-center-v, body:has(.main-form#entry) .content-center-v { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: 0; min-height: auto; } /* ============================================================================ MAIN-FORM (#entry) — wrapper, no card style here Wrapper, card'ning o'zi emas — main-form__card oq card ============================================================================ */ .main-form#entry { width: 100%; max-width: 400px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0 auto; display: flex; flex-direction: column; gap: 0; } /* Sarlavha "Xush Kelibsiz" — card ICHIDA */ .main-form#entry h3 { text-align: center; font-size: 22px; font-weight: var(--font-bold); color: var(--text-primary); margin: 0 0 20px; letter-spacing: -0.01em; } /* ============================================================================ MAIN-FORM__CARD — OQ CARD: title + inputs + button ============================================================================ */ .main-form__card { background-color: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 16px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 16px; } /* ============================================================================ INPUTS — Figmadagi light gray fill, ikona bilan ============================================================================ */ .main-form#entry .input-field { margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; } /* Label "Login" / "Parol" — input'dan YUQORIDA */ .main-form#entry .input-field label { font-size: 13px; font-weight: var(--font-medium); color: var(--text-primary); margin: 0; } .main-form#entry .input-field label[placeholder]::before { content: attr(placeholder); } /* Input wrapper span */ .main-form#entry .input-field > span { position: relative; display: block; } /* Asosiy input stillari */ .main-form#entry .input-field input[type="text"], .main-form#entry .input-field input[type="password"] { width: 100%; height: 42px; padding: 0 var(--space-md); padding-left: 40px; font-family: var(--font-family-base); font-size: 14px; color: var(--text-primary); background-color: #FFFFFF; border: 1.5px solid #E5E5E5; border-radius: 10px; transition: border-color var(--transition-fast), background-color var(--transition-fast); outline: none; box-shadow: none; } .main-form#entry .input-field input::placeholder { color: #B8B8B8; font-size: 14px; } /* Hover */ .main-form#entry .input-field input:hover:not(:disabled):not(:focus) { border-color: #D4D4D4; } /* Focus — yashil border */ .main-form#entry .input-field input:focus { background-color: #FFFFFF; border-color: var(--color-primary); box-shadow: none; } /* Error state — RED border (Figmadagidek) */ .main-form#entry .input-field.has-error input[type="text"], .main-form#entry .input-field.has-error input[type="password"] { border-color: #EF4444; background-color: #FFFFFF; } /* ============================================================================ IKONALAR — input ichida chap tomonda ============================================================================ */ /* Login input — user ikonkasi MUHIM: faqat input wrapper span'iga (input bilan birga) qo'llaniladi, .input-error__text span'iga emas! Aks holda 2-ikonka chiqib qoladi. */ .main-form#entry .input-field:has(input[name="login"]) > span:not(.input-error__text)::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url('/itilium/themes/img/icons/user-input.svg') center/contain no-repeat; opacity: 0.55; pointer-events: none; z-index: 2; } .main-form#entry .input-password::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url('/itilium/themes/img/icons/lock.svg') center/contain no-repeat; opacity: 0.55; pointer-events: none; z-index: 2; } /* Error state — ikona rangi red'ga aylantirish */ .main-form#entry .input-field.has-error:has(input[name="login"]) > span:not(.input-error__text)::before, .main-form#entry .input-field.has-error .input-password::before { opacity: 0.7; filter: invert(38%) sepia(82%) saturate(2476%) hue-rotate(346deg) brightness(96%) contrast(94%); } /* Password input — eye uchun o'ng padding */ .main-form#entry .input-password input[type="password"], .main-form#entry .input-password input[type="text"] { padding-right: 40px; } /* Eye toggle button */ .main-form#entry .eye-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; background: url('/itilium/themes/img/icons/eye.svg') center/contain no-repeat; background-color: transparent !important; border: none; opacity: 0.55; cursor: pointer; transition: opacity var(--transition-fast); z-index: 3; } .main-form#entry .eye-password:hover { opacity: 0.9; } .main-form#entry .eye-password.active { background-image: url('/itilium/themes/img/icons/eye-open.svg'); opacity: 1; } /* ============================================================================ ERROR TEXT — input ostida red matn ============================================================================ */ .main-form#entry .input-error__text { display: none; font-size: 12px; color: #EF4444; margin-top: 0; font-weight: var(--font-medium); } .main-form#entry .input-field.has-error .input-error__text { display: block; } /* ============================================================================ "Kirish" tugma — yashil, full width ============================================================================ */ .main-form#entry .submit-btn { display: block; width: 100%; margin: 8px 0 0; } .main-form#entry .submit-btn input[type="submit"], .main-form#entry .submit-btn .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 var(--space-lg); background-color: var(--color-primary); color: var(--text-on-primary); font-family: var(--font-family-base); font-size: 14px; font-weight: var(--font-semibold); border: none; border-radius: 10px; cursor: pointer; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); letter-spacing: 0; } .main-form#entry .submit-btn input[type="submit"]:hover, .main-form#entry .submit-btn .btn:hover { background-color: var(--color-primary-hover); box-shadow: 0 4px 12px rgba(24, 184, 60, 0.25); } .main-form#entry .submit-btn input[type="submit"]:active, .main-form#entry .submit-btn .btn:active { background-color: var(--color-primary-active); transform: translateY(1px); box-shadow: none; } /* ============================================================================ MAIN-FORM__BOTTOM — Card TASHQARISIDA: checkbox (chap) + lang (o'ng) ============================================================================ */ .main-form__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 20px 0 0; padding: 0 4px; } /* "Meni eslab qolish" checkbox — shadcn-style, card TASHQARISIDA Native input yashirilgan, custom .checkbox-icon — 16x16 sharp, OQ tick */ .main-form#entry .checkbox { margin: 0; display: flex; } .main-form#entry .checkbox label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text-secondary); } /* Native input — to'liq yashirilgan (pointer events ham yo'q) */ .main-form#entry .checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; margin: 0; } /* Custom checkbox icon — shadcn unchecked: oq fon + gray border */ .main-form#entry .checkbox-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; background-color: #FFFFFF; border: 1.5px solid #D4D4D4; border-radius: 4px; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } /* Checked — yashil fon + OQ TICK (inline SVG, shadcn style) */ .main-form#entry .checkbox input[type="checkbox"]:checked + .checkbox-icon { background-color: var(--color-primary); border-color: var(--color-primary); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 12px; } /* Hover (unchecked) — yashil border */ .main-form#entry .checkbox label:hover .checkbox-icon { border-color: var(--color-primary); } /* Hover (checked) — quyuqroq yashil */ .main-form#entry .checkbox input[type="checkbox"]:checked + .checkbox-icon:hover, .main-form#entry .checkbox label:hover input[type="checkbox"]:checked + .checkbox-icon { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* Focus — shadcn focus ring */ .main-form#entry .checkbox input[type="checkbox"]:focus-visible + .checkbox-icon { box-shadow: var(--shadow-focus); } /* ============================================================================ LANG SWITCHER (login page) — header bilan BIR XIL design .lang-switcher base styles 04-layout.css ichida. Bu yerda faqat pozitsiya — dropdown YUQORIGA ochiladi (chunki pastida versiya matni bor). ============================================================================ */ .main-form__bottom .lang-switcher__menu { top: auto; bottom: calc(100% + 4px); } /* ============================================================================ Forgot password link ============================================================================ */ .main-form#entry .main-form__down { text-align: center; margin-top: 16px; font-size: 13px; } .main-form#entry .main-form__down .dark-blue-link { color: var(--text-link); font-weight: var(--font-medium); text-decoration: none; transition: color var(--transition-fast); } .main-form#entry .main-form__down .dark-blue-link:hover { color: var(--text-link-hover); text-decoration: underline; } /* Registration link */ body.page-login .content-center-v > .align-center, body:has(.main-form#entry) .content-center-v > .align-center { margin-top: 8px; text-align: center; } body.page-login .content-center-v > .align-center .dark-blue-link, body:has(.main-form#entry) .content-center-v > .align-center .dark-blue-link { color: var(--text-link); font-weight: var(--font-medium); font-size: 13px; text-decoration: none; } body.page-login .content-center-v > .align-center .dark-blue-link:hover, body:has(.main-form#entry) .content-center-v > .align-center .dark-blue-link:hover { text-decoration: underline; } /* ============================================================================ Versiya matni — pastda ============================================================================ */ body.page-login .version, body:has(.main-form#entry) .version { margin-top: auto; padding-top: var(--space-2xl); text-align: center; font-size: 11px; color: var(--text-muted); line-height: 1.6; } body.page-login .version b, body:has(.main-form#entry) .version b { font-weight: var(--font-semibold); color: var(--text-tertiary); } /* ============================================================================ Error / Warning xabarlari (auth_domain_error) — yangi dizayn ============================================================================ */ .main-form#entry #auth_domain_error, .main-form#entry #auth_domain_ajax { display: flex; align-items: flex-start; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: 12px 14px; background-color: var(--color-warning-bg); border: 1px solid var(--color-warning); border-left: 3px solid var(--color-warning); border-radius: 8px; color: var(--color-warning-text); font-size: 13px; line-height: 1.45; } .main-form#entry #auth_domain_error::before, .main-form#entry #auth_domain_ajax::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; background: url('/itilium/themes/img/icons/attantion.svg') center/contain no-repeat; margin-top: 1px; filter: brightness(0) saturate(100%) invert(45%) sepia(60%) saturate(700%) hue-rotate(20deg) brightness(95%) contrast(90%); } .main-form#entry #auth_domain_error b, .main-form#entry #auth_domain_ajax b { font-weight: var(--font-semibold); } .main-form#entry #auth_domain_error:empty, .main-form#entry #auth_domain_ajax:empty { display: none; } /* ============================================================================ RESPONSIVE — tablet va mobile ============================================================================ */ @media (max-width: 768px) { .login-deco { width: 130px; height: 140px; } body.page-login header.header-shortcut, body:has(.main-form#entry) header.header-shortcut { padding-top: 48px; } } @media (max-width: 480px) { .login-deco { width: 100px; height: 110px; opacity: 0.7; /* mobile'da yengilroq */ } body.page-login header.header-shortcut, body:has(.main-form#entry) header.header-shortcut { padding-top: 32px; } body.page-login .logo img, body:has(.main-form#entry) .logo img { height: 26px; } body.page-login main, body:has(.main-form#entry) main { padding: 16px var(--space-md) var(--space-lg); } .main-form#entry { max-width: 100%; } .main-form__card { padding: 24px 20px; border-radius: 14px; } .main-form#entry h3 { font-size: 20px; margin-bottom: 16px; } .main-form__bottom { padding: 0; margin-top: 16px; } } /* ============================================================================= 06/Pages — Home / Asosiy ekran (home.php) ----------------------------------------------------------------------------- Figma tartibi: 1. "Создайте обращение" h1 (markazda, katta bold) 2. "+ Новое обращение" yashil tugma (kichikroq, markazda) 3. "Категории шаблонов для регистрации обращений" h3 (kichik, markazda) 4. Search input (markazda, yumaloq, ingichka) 5. Templates grid (3 column, kichik horizontal cards) ========================================================================== */ /* Container'ga flex - tartibni qayta belgilash uchun */ .page_template { padding: var(--space-2xl) 0 var(--space-3xl); position: relative; } /* ============================================================================ FIGMA 100% — Home page'da: - Header transparent, border-bottom YO'Q - Hero fon rasm .home-hero'da (pastda) — eski radial-gradient rasmga almashtirildi ============================================================================ */ body.page-home .wrapper { background-color: var(--bg-page); } /* Home page'da .home-hero .container'dan tashqarida (to'liq kenglik) — ehtiyot uchun scroll artefakti chiqmasin */ body.page-home { overflow-x: hidden; } /* .home-hero endi .page_template'ning bevosita farzandi (.container ichida emas, pastga qarang), shuning uchun .page_template'ning odatiy top padding'i (48px) unga kerak emas — hero header bilan bir qatorda, page'ning haqiqiy yuqori chetidan boshlanadi */ body.page-home .page_template { padding-top: 0; display: flow-root; /* BFC — .home-hero'ning manfiy margin-top'i shu yerda "ushlanadi" (contain bo'ladi), page_template'ning o'zi surilib ketmaydi, aniq/barqaror natija */ } /* Header — sahifa boshida (scroll=0) BUTUNLAY shaffof, hero rasm orqasidan to'liq ko'rinadi. Scroll boshlanishi bilan (script.js .header-scrolled klassini qo'shadi) frosted glass (backdrop blur) fon paydo bo'ladi — Apple/macOS style, o'qilishi uchun */ body.page-home header { background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; transition: background-color var(--transition-base), backdrop-filter var(--transition-base); } body.page-home header.header-scrolled { background-color: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; } /* Eski .page_template::before gradient — endi wrapper'da, bu kerakmas */ .page_template::before { display: none; } .page_template .container { position: relative; z-index: 1; display: flex; flex-direction: column; } /* ============================================================================ HERO — Figma fileKey Sbyy8lHQ8gqybcx1Z3XQOZ, node 728:3716 ("Main") dan 1:1 (get_metadata/get_design_context orqali olingan aniq qiymatlar, taxmin YO'Q): - Hero band BUTUN VIEWPORT kengligida (Frame 2136137407: x=0..1440, .container'ning 1200px cheklovi bunga tegishli emas — HTML'da ham .home-hero .container'dan TASHQARIDA, home.php'ga qarang) - header (node 728:4023) xuddi shu hero band ICHIDA (y=0..68) — rasm header orqasida ham davom etadi, header shaffof holda uning ustida suzadi - Rasmning o'zida radius YO'Q (to'liq keskin burchak, chekka-dan-chekkagacha) - Hero balandligi: 650px (header balandligi shu 650px ichiga kiradi) - Fon rasm tugagach "Категории..." bloki boshlangунча 100px oq oraliq (Frame54.y=750 − hero height=650 = 100) - Matn bloki hero'ning 140px'idan boshlanadi (Frame60.y=140, page'ning eng yuqorisidan hisoblanadi) - Title/Subtitle/Button orasida bir xil 24px gap (Frame60 gap=24) ============================================================================ */ .home-hero { position: relative; z-index: 0; /* .home-hero'ga o'z stacking context'ini beradi — aks holda ::before'ning z-index:-1 qiymati yuqoriga (root'gacha) "qochib", .wrapper'ning oq fonи (--bg-page) rasm ustidan chizilib qolar edi */ /* Balandlik ekran BO'YIGA moslashadi. Muammo: 500px qat'iy balandlik 1920x1080 da viewport'ning ~53% ini egallaydi, ammo 13.6" noutbukda (yoki Windows 150% masshtabida) viewport bo'yi ~660-840px bo'lgani uchun o'sha 500px 60-76% ga aylanib, rasm ekranni bosib ketardi. 53vh — aynan 1920x1080 dagi nisbat (500 / ~937px viewport), shu sababli katta ekranlarda ko'rinish o'zgarmaydi (min() 500px bilan cheklaydi), past ekranlarda esa o'sha nisbat saqlanadi. 320px — matn bloki (56+24+48+24+44) sig'ishi uchun quyi chegara. */ height: clamp(360px, 53vh, 500px); margin-top: calc(-1 * var(--header-height)); /* sticky header (72px) bilan bir bandga tortish — Figma'da header shu hero ichida */ margin-bottom: 40px; /* pastdagi heading tepa masofasi qisqartirildi (100->40) */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* matn rasmning qoq markazida (vertikal) tursin */ padding-top: 0; overflow: hidden; } /* Fon rasm — .home-hero endi to'liq viewport kengligida (.container'dan tashqarida), ::before shunchaki inset:0 bilan shu to'liq bandni to'ldiradi */ .home-hero::before { content: ''; position: absolute; inset: 0; background-image: url('/itilium/themes/img/hero_bg.jpg?v=3'); /* ?v= — rasm o'zgarganda brauzer 30 kunlik keshni chetlab o'tishi uchun oshiriladi */ background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-color: #d9ecd8; /* rasm yuklangunча fallback fon (rasmning yuqori tint rangi) */ z-index: -1; } .home-hero__title { margin: 0 0 24px; text-align: center; font-family: var(--font-family-base); font-size: 44px; font-weight: var(--font-bold); line-height: 56px; color: #212121; letter-spacing: 0; } .home-hero__subtitle { width: 450px; max-width: 100%; margin: 0 0 24px; text-align: center; font-family: var(--font-family-base); font-size: var(--font-md); font-weight: var(--font-regular); line-height: 24px; color: #4d4d4d; } /* ============================================================================ 2) "+ Новое обращение" tugma — markazda, kichikroq ============================================================================ */ .home-hero .center { display: flex; justify-content: center; margin: 0; } .add-announcement { display: inline-flex !important; align-items: center; justify-content: center; gap: var(--space-0-5); /* Figma: icon-label gap 2px */ width: auto; min-width: 220px; height: auto; /* button.css height-lg'ni bekor qilish — padding o'lcham belgilaydi */ padding: 12px 16px; /* Figma: tugma padding 12px 16px */ line-height: 1.2; background-color: var(--color-primary); color: var(--text-on-primary); font-size: var(--font-sm); font-weight: var(--font-semibold); border-radius: var(--radius-lg); /* Figma: 12px */ text-decoration: none; border: none; cursor: pointer; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); white-space: nowrap; } .add-announcement svg { flex-shrink: 0; } .add-announcement:hover { background-color: var(--color-primary-hover); color: var(--text-on-primary); box-shadow: var(--shadow-md); } .add-announcement:active { background-color: var(--color-primary-active); transform: translateY(1px); } /* ============================================================================ 3) Section subtitle (h3) — "Категории шаблонов..." ============================================================================ */ .page_template h3 { order: 3; text-align: center; font-size: var(--font-2xl); /* Figma: 24px */ font-weight: var(--font-bold); /* Figma: 700 */ line-height: 32px; /* Figma: 32px */ color: var(--text-primary); margin: 0 0 var(--space-md); letter-spacing: -0.01em; } /* ============================================================================ 4) Search — markazda, kichikroq ============================================================================ */ .create-appeal__head { order: 4; display: flex; justify-content: center; margin: 0 auto var(--space-lg); width: 100%; max-width: 480px; /* Subcategory page bilan bir xil */ } .create-appeal__head .search { width: 100%; } /* ============================================================================ "Результаты поиска..." label (live filter ishlaganda — natija bor) ============================================================================ */ .search-results-label { order: 5; text-align: center; font-size: var(--font-md); color: var(--text-secondary); margin: 0 0 var(--space-md); font-weight: var(--font-medium); } /* Templates grid'ni order 6 ga olamiz (results-label dan keyin) */ .page_template .templates { order: 6; } /* ============================================================================ Empty state — search natija yo'q (Figma: sad face ikon + matn) ============================================================================ */ .search-empty-state { order: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--text-secondary); } .search-empty-state__icon { width: 120px; height: 120px; margin-bottom: var(--space-md); background: url('/itilium/themes/img/icons/empty-search.svg') center/contain no-repeat; opacity: 0.9; } .search-empty-state__text { font-size: var(--font-md); color: var(--text-secondary); font-weight: var(--font-regular); /* ma'lumot yo'q ogohlantirishi — 400 */ line-height: 1.4; } /* ============================================================================ 5) Templates grid ============================================================================ */ .page_template .templates { order: 5; margin: 0; } /* ============================================================================ 6) Notification (xato/info) — eng yuqorida bo'lsin ============================================================================ */ .page_template .notification { order: 0; /* eng yuqorida */ margin-bottom: var(--space-lg); } /* ============================================================================ PAGINATION — Home page'da kerakmas (categoriyalar/shablonlar oz) ---------------------------------------------------------------------------- home.php pagination'ni inline style="margin-bottom:2rem" div ichida render qiladi. CSS order tufayli u eng yuqoriga chiqib qoladi — yashiramiz. Bizga 1-darajali kategoriyalar bir varaqda hammasi ko'rinishi kerak. ============================================================================ */ .page_template .pagination, .page_template nav.pagination, .page_template > .container > div[style*="margin-bottom"]:has(.pagination), .page_template > .container > div[style*="margin-bottom"]:has(nav) { display: none !important; } /* ============================================================================ 7) Sliders (mass appeals) — agar bor bo'lsa ============================================================================ */ .page_template .sliders, .page_template h3:first-of-type { /* Sliders sarlavhasi va sliderlar — agar bor bo'lsa, kategoriya h3 dan oldin */ } /* ============================================================================ News section — eng pastda ============================================================================ */ #news { order: 10; display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); } #news article, #news .news-item { padding: var(--space-lg); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } #news article:hover, #news .news-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .getNews { display: block; width: 100%; max-width: 200px; margin: var(--space-md) auto 0; } /* ============================================================================ PAST BO'YLI EKRANLAR (13.6" noutbuklar, Windows 150% masshtab va h.k.) ---------------------------------------------------------------------------- Muammo: hero balandligi 500px qat'iy edi. 1920x1080 da brauzer viewport'i ~937px bo'lgani uchun bu ~53% chiqadi va yaxshi ko'rinadi; 13.6" ekranda esa viewport bo'yi ~660-840px, ya'ni o'sha 500px 60-76% ga aylanib, fon rasm ekranning yarmidan ko'pini bosib qolardi. Yechim ikki qismli: 1) .home-hero balandligi endi 53vh (yuqorida) — aynan 1920x1080 dagi nisbat. 2) Shu blok — faqat viewport bo'yi 900px dan past bo'lganda ishlaydi, ya'ni 1920x1080 (viewport ~937px) BU SHARTGA TUSHMAYDI va katta ekranlarda ko'rinish o'zgarishsiz qoladi. Blok ichida nima qilinadi: - padding-top: header balandligi. Hero header ostidan boshlanadi (margin-top manfiy), matn esa justify-content:center bilan BUTUN hero bo'yicha markazlashadi. Hero pasayganda sarlavha shaffof header ustiga chiqib ketardi; padding-top markazlashni header'dan PASTDAGI sohaga ko'chiradi. - Eski style.css'dagi #itilium_module selektorlari (ID => yuqori specificity) hero ichidagi Figma masofalarini bosib turadi: #itilium_module h1 -> margin-bottom: 35px (Figma: 24px) #itilium_module .page_template .center -> margin-bottom: 2rem (kerak emas) .add-announcement -> margin-bottom: 24px (kerak emas) Jami 67px "o'lik" bo'sh joy. Past ekranda bu joy tanqis, shuning uchun shu yerda Figma qiymatlariga qaytariladi (katta ekranda tegilmaydi — mijoz 1920x1080 ko'rinishi o'zgarmasin dedi). ============================================================================ */ @media (min-width: 769px) and (max-height: 900px) { .home-hero { padding-top: var(--header-height); } /* specificity: (1,2,0) — #itilium_module h1 (1,0,1) dan yuqori */ #itilium_module .home-hero .home-hero__title { margin-bottom: var(--space-lg); /* Figma: 24px */ } /* specificity: (1,3,0) — #itilium_module .page_template .center (1,2,0) dan yuqori */ #itilium_module .page_template .home-hero .center { margin-bottom: 0; } .home-hero .center .add-announcement { margin-bottom: 0; } .home-hero__subtitle { margin-bottom: var(--space-lg); /* Figma: 24px */ } } /* ============================================================================ Mobile ============================================================================ */ @media (max-width: 768px) { /* DIQQAT: Figma faylida mobil "Main" freymi yo'q — bu qiymatlar VAQTINCHA, Figma'dan aniq mobil o'lchamlar (yoki mobil rasm) kelgach yangilanadi. */ .home-hero { height: 340px; /* desktop 500px'ga proportsional pasaytirildi (420->340) */ margin-top: calc(-1 * var(--header-height-mobile)); padding-top: 0; /* matn vertikal markazda (justify-content: center bazadan) */ margin-bottom: var(--space-lg); /* pastdagi heading tepa masofasi qisqartirildi (48->24) */ } .home-hero__title { font-size: var(--font-2xl); margin-bottom: var(--space-md); } .home-hero__subtitle { width: 100%; padding: 0 var(--space-md); font-size: var(--font-sm); margin-bottom: var(--space-md); } .add-announcement { min-width: 180px; font-size: var(--font-sm); } .page_template { padding: var(--space-lg) 0 var(--space-2xl); } } /* ============================================================================= 06/Pages — Обращения (Tickets list) — 100% Figma match ----------------------------------------------------------------------------- 2 ta holat: 1. Empty — "На данный момент обращений нет" 2. Filled — jadval ma'lumotlar bilan Status badge ranglari: - Ожидают согласования → PURPLE - Ожидают ответа → YELLOW - Открытые → BLUE - Закрытые → GREEN - Boshqa → GRAY (neutral) ========================================================================== */ .appeals-page { padding: var(--space-xl) 0 var(--space-2xl); min-height: 60vh; } /* ============================================================================ 1) HEADER — title (chap) + filter tabs (o'ng) ============================================================================ */ /* IMPORTANT:
global selector (04-layout.css)'dan keladigan border-bottom, height, sticky, background va boshqalarni bekor qilamiz */ .appeals-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); background-color: transparent; height: auto; border: none; border-bottom: none; position: static; top: auto; z-index: auto; } .appeals-header__title { margin: 0 auto 0 0; /* push search + filters to right */ font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } /* ============================================================================ SEARCH form — loyihaning .search + .input-item komponentini ishlatadi. Appeals header'da: balandlik filter tablar bilan bir xil (36px) ============================================================================ */ .appeals-search-form.search { width: 280px; flex-shrink: 0; } /* Input balandligini filter tablar bilan moslashtirish */ .appeals-search-form.search .input-item { height: 36px; padding-left: 38px; } /* Icon ham kichikroq pozitsiya */ .appeals-search-form.search::before { left: 12px; width: 14px; height: 14px; } /* Clear button — kichikroq input'ga moslangan */ .appeals-search-form.search:has(.input-item:not(:placeholder-shown):not([value=""])) .search-clear { right: 10px; width: 16px; height: 16px; } /* ============================================================================ 2) FILTER TABS — pill style ---------------------------------------------------------------------------- Default: oq fon, kulrang border Active: yashil fon, oq matn (Figma) ============================================================================ */ /* Filter tabs — SINGLE BUTTON GROUP (segmented control) - Outer container: border + rounded corners - Active tab: yashil pill, container ichida "float" (padding bilan) - Inactive tabs: transparent, oralarda thin divider line */ .appeals-filters { display: inline-flex; align-items: stretch; /* Stretch — tab to'liq balandlikni egallasin */ flex-wrap: nowrap; gap: 0; padding: 0; /* Figma: padding YO'Q */ background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; /* Active tab rounded corners wrapper'ga moslashsin */ } .appeals-filter { display: inline-flex; align-items: center; height: 36px; /* Biroz kattaroq — Figma */ padding: 0 16px; background-color: transparent; color: var(--text-muted); /* Yorug' kulrang (Figma) */ font-size: 13px; font-weight: var(--font-medium); border: none; border-radius: 0; /* Default — Figma: kvadrat. Active'da rounded */ text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; transition: background-color var(--transition-fast), color var(--transition-fast); } /* Inactive tab'lar orasidagi vertikal divider — Figma: TO'LIQ balandlik */ .appeals-filter:not(:last-child)::after { content: ''; position: absolute; top: 0; bottom: 0; /* To'liq balandlik (top:0 + bottom:0) */ right: 0; width: 1px; background-color: var(--border-default); } /* Active tab tepasida va active'dan oldingi tab'da divider ko'rinmasin */ .appeals-filter.is-active::after, .appeals-filter:has(+ .is-active)::after { display: none; } .appeals-filter:hover:not(.is-active) { color: var(--text-secondary); } .appeals-filter.is-active { background-color: var(--color-primary); color: var(--color-white, #ffffff); } .appeals-filter.is-active:hover { background-color: var(--color-primary-hover); color: var(--color-white, #ffffff); } /* ============================================================================ 3) TABLE WRAPPER — oq kartochka, light border, rounded corners ============================================================================ */ .appeals-table-wrapper { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; width: 100%; } /* ============================================================================ 4) TABLE — jadval ============================================================================ */ .appeals-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; } .appeals-table thead th { padding: 14px 18px; /* cell bilan gorizontal hizalanish (18px) */ text-align: left; font-weight: var(--font-medium); font-size: 13px; color: var(--text-tertiary); background-color: var(--bg-subtle); /* #F8F8F8 — body'dan ozgina to'qroq */ border-bottom: 1px solid var(--border-default); white-space: nowrap; vertical-align: middle; } .appeals-table__th-theme { min-width: 220px; } /* Sort link in header — Figma'da arrow ko'rinmaydi, faqat clickable text */ .appeals-table__sort { display: inline-flex; align-items: center; color: inherit; text-decoration: none; font-weight: inherit; cursor: pointer; transition: color var(--transition-fast); } .appeals-table__sort:hover { color: var(--text-primary); } .appeals-table__sort.is-active { color: var(--text-primary); font-weight: var(--font-semibold); } /* Sort arrow — Figma'da yo'q, lekin DOM'da bor (PHP'dan keladi). Yashirib turamiz — hover'da ham ko'rinmaydi */ .appeals-table__sort-icon { display: none; } /* Table body — qator separatorlari faqat qatorlar OARASIDA */ .appeals-table tbody td.appeals-table__cell { padding: 16px 18px; /* Figma: Murojaatlar card padding 16px 18px */ color: var(--text-primary); vertical-align: middle; background-color: var(--bg-surface); } /* Birinchi qatorda border-top yo'q (header bilan tutash bo'lsin) */ .appeals-table tbody tr:not(:first-child) td.appeals-table__cell { border-top: 1px solid var(--border-default); } .appeals-table__row { cursor: pointer; transition: background-color var(--transition-fast); } .appeals-table__row:hover td { background-color: var(--bg-muted); } /* ============================================================================ 5) TOPIC BADGE — Figma'dagi ko'k pill ("Текст названия обращения") ============================================================================ */ .appeals-topic-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; background-color: var(--color-info-bg); color: var(--color-info-text); font-size: 13px; font-weight: var(--font-medium); border-radius: var(--radius-md); text-decoration: none; line-height: 1.3; transition: background-color var(--transition-fast); } .appeals-topic-badge:hover { background-color: #BFDBFE; /* darker light blue */ } .appeals-topic-badge__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Atribut belgilari (attention va new message) */ .appeals-topic-badge__attn, .appeals-topic-badge__new { flex-shrink: 0; width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; } .appeals-topic-badge__attn { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F59E0B%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E"); } .appeals-topic-badge__new { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231E40AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22%2F%3E%3Cpolyline%20points%3D%2222%206%2012%2013%202%206%22%2F%3E%3C%2Fsvg%3E"); } /* ============================================================================ 6) NUMBER va DATE cell'lar ============================================================================ */ .appeals-table__number { color: var(--text-secondary); white-space: nowrap; font-size: 13px; } .appeals-table__date { color: var(--text-secondary); white-space: nowrap; font-size: 13px; line-height: 1.4; } .appeals-table__date-actual { margin-top: 2px; font-size: 12px; font-weight: var(--font-medium); } .appeals-table__date-actual.is-overdue { color: var(--color-danger); } .appeals-table__date-actual.is-ontime { color: var(--color-primary); } .appeals-table__initiator { font-size: 13px; color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ============================================================================ 7) STATE BADGE — Figma'dagi 5 ta rang ============================================================================ */ /* ============================================================================= STATE BADGE — Figma dizayni: orqa fon YO'Q, faqat rangli dumaloq + matn "Статус: ● Зарегистрировано" formatda ko'rinadi. ::before pseudo-element rangli dumaloqni hosil qiladi, rang .state-badge-- modifier orqali beriladi. ============================================================================ */ .state-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: none; font-size: 13px; font-weight: var(--font-medium); color: var(--text-primary); white-space: nowrap; line-height: 1.5; } /* Rangli dumaloq — ::before orqali */ .state-badge::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background-color: #D1D5DB; /* default — kulrang */ } /* Color modifiers — faqat dumaloqning rangini o'zgartiradi */ .state-badge--green::before { background-color: #22C55E; } .state-badge--yellow::before { background-color: #F59E0B; } .state-badge--blue::before { background-color: #3B82F6; } .state-badge--purple::before { background-color: #A855F7; } .state-badge--red::before { background-color: #EF4444; } .state-badge--dark::before { background-color: #1A1A1A; } .state-badge--orange::before { background-color: #FB923C; } .state-badge--sky::before { background-color: #7DD3FC; } /* NEUTRAL (Зарегистрировано) — Figma: solid #D9D9D9 fon (transparent emas) */ .state-badge--neutral::before { background-color: #D9D9D9; border: none; box-sizing: border-box; } /* ============================================================================ 8) EMPTY STATE — "На данный момент обращений нет" ============================================================================ */ .appeals-table__empty-body td { padding: 0 !important; border: none !important; background-color: var(--bg-surface) !important; } .appeals-empty { padding: var(--space-3xl) var(--space-lg); text-align: center; background-color: var(--bg-surface); } .appeals-empty__text { margin: 0; font-size: var(--font-sm); color: var(--text-tertiary); font-weight: var(--font-regular); /* ma'lumot yo'q ogohlantirishi — 400 */ line-height: 1.5; } /* ============================================================================ 9) PAGINATION ============================================================================ */ .appeals-pagination { margin-top: var(--space-lg); } /* ============================================================================ 10) MOBILE — jadval card-stack ko'rinishida ============================================================================ */ @media (max-width: 768px) { .appeals-header { flex-direction: column; align-items: stretch; } .appeals-header__title { margin: 0; } .appeals-search-form { width: 100%; } /* Filter tab'lar — horizontal scrollable segmented control */ .appeals-filters { display: flex !important; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ /* Snap behavior — qulay scroll */ scroll-snap-type: x proximity; } .appeals-filters::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .appeals-filter { flex-shrink: 0; /* tab'lar siqilmasin */ white-space: nowrap; scroll-snap-align: start; } .appeals-filters::-webkit-scrollbar { display: none; } .appeals-filter { flex-shrink: 0; } /* REDIZAYN: Mobileda ham TABLE ko'rinishi saqlanadi — "stacked card" o'rniga gorizontal scroll (overflow-x). Shunda jadval tuzilishi buzilmaydi. */ .appeals-table-wrapper { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* iOS silliq scroll */ } .appeals-table { min-width: 760px; /* ustunlar siqilmasin → gorizontal scroll paydo bo'ladi */ } /* thead ko'rinib turadi; hujayralar desktopdagi stilini (padding, 2-qatorli mavzu clamp, sana nowrap) o'zgarmagan holda saqlaydi */ } /* ============================================================================= 06/Pages — Новое обращение (create.php) — 100% Figma match ----------------------------------------------------------------------------- 3 ta holat: 1. Default — bo'sh form 2. Filled — to'ldirilgan + fayllar 3. Submitted — success modal ========================================================================== */ .create-page { padding: var(--space-lg) 0 0; overflow-x: hidden; /* horizontal scroll oldini olish */ max-width: 100vw; } .create-page #create_send_form { display: flex; flex-direction: column; } /* niceSelect widget KO'RINADI — create page dropdown'lari niceSelect'ga qaytarildi. (Avval custom-select foydasiga yashirilgan edi; endi asl mexanizm tiklandi.) Stillari pastda "Native Select stillari — niceSelect" bo'limida (588+). */ /* Loading overlay'ni create page'da o'chiramiz — select tanlaganda AJAX ishga tushib, overlay qotib qolmasin */ body:has(.create-page) .loading_total_back, body:has(.create-page) #bigmodal:not([style*="flex"]):not(.is-open), .create-page ~ .loading_total_back { display: none !important; pointer-events: none !important; } /* ============================================================================ 1) Breadcrumb (yuqorida) ============================================================================ */ .create-page .breadcrumbs { margin-bottom: var(--space-md); } /* ============================================================================ 2) Title with back arrow ============================================================================ */ .create-page__title { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0 0 var(--space-xl); letter-spacing: -0.01em; } /* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */ .create-page__back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0; /* "←" unicode character ni yashirish */ color: transparent; text-decoration: none; transition: background-color var(--transition-fast); } .create-page__back:hover { background-color: var(--bg-muted); } /* ============================================================================ 3) Popular services (pills) ============================================================================ */ .popular-services, .create-page .membershipServices { margin: 0 0 var(--space-lg); } /* Header: label (chap) + search (o'ng) — Figma layout */ .popular-services__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-sm); flex-wrap: wrap; } .popular-services__label { font-size: var(--font-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; } /* Search input — shadcn-style */ .popular-services__search { position: relative; width: 280px; max-width: 100%; } .popular-services__search-input { width: 100%; height: 36px; padding: 0 36px 0 38px; font-family: var(--font-family-base); font-size: 13px; color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .popular-services__search-input:hover:not(:focus) { border-color: var(--border-strong); } .popular-services__search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(24, 184, 60, 0.10); } .popular-services__search-input::placeholder { color: var(--text-muted); } /* Search ikona (chap tomonda) */ .popular-services__search::before { content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; pointer-events: none; } /* Clear (X) tugma — o'ng tomonda */ .popular-services__search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E") center/12px no-repeat; border: none; border-radius: 6px; cursor: pointer; display: none; /* JS .style.display orqali ko'rsatamiz */ transition: background-color var(--transition-fast); } .popular-services__search-clear:hover { background-color: var(--bg-muted); } /* Empty state — qidiruv natijasi bo'lmaganda */ .popular-services__empty { margin: var(--space-md) 0; padding: var(--space-md); text-align: center; background-color: var(--bg-muted); border-radius: var(--radius-md); font-size: 13px; color: var(--text-tertiary); } /* Mobile */ @media (max-width: 640px) { .popular-services__header { align-items: stretch; } .popular-services__search { width: 100%; } } .popular-services__list, .create-page .membershipServices-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .service-pill, .create-page .membershipServices-list .card { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background-color: var(--bg-muted); color: var(--text-secondary); font-size: 13px; font-weight: var(--font-medium); border: 1px solid transparent; border-radius: var(--radius-md); /* 8px — boshqa komponentlar bilan bir xil */ cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .service-pill:hover, .create-page .membershipServices-list .card:hover { border-color: var(--color-info); } /* Active (selected) — FAQAT ko'k border, fon odatiy turadi */ .service-pill.is-active, .service-pill.active, .create-page .membershipServices-list .card.is-active, .create-page .membershipServices-list .card.active { background-color: var(--bg-muted) !important; /* default gray */ color: var(--text-secondary) !important; /* default text */ border-color: var(--color-info) !important; /* faqat ko'k border */ box-shadow: 0 0 0 0.5px var(--color-info) !important; } /* Active + hover — border ko'k bo'lib qoladi (hover bg'ni o'chiramiz) */ .service-pill.is-active:hover, .service-pill.active:hover, .create-page .membershipServices-list .card.is-active:hover, .create-page .membershipServices-list .card.active:hover { background-color: var(--bg-muted) !important; } /* ============================================================================ 4) Form card — oq fon, border, padding ============================================================================ */ .create-form-card, .create-page .create-appeal__content { display: block; padding: var(--space-xl); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); } .create-form-card .create-appeal__editor { display: flex; flex-direction: column; gap: var(--space-md); } /* ============================================================================ 5) Form fields ============================================================================ */ .create-page .input-field { display: flex; flex-direction: column; gap: 6px; margin: 0; position: relative; } .create-form__label, .create-page .create-form__label { display: block; font-size: 13px; font-weight: var(--font-medium); color: var(--text-primary); margin: 0; } .create-form__label--required::before, .create-page .create-form__label--required::before { content: '* '; color: var(--color-info); /* Figma: KO'K (blue) */ } /* ============================================================================ 6) Service selectors row — 2 column (Выберите услугу + Состав) ============================================================================ */ .create-page .create-appeal__select.create-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: 0; } .create-page .create-appeal__select .input-field { margin: 0; min-width: 0; /* grid cell siqilsin → select overflow qilmasin (mobile) */ } /* Agar group bo'lsa, 3 column */ .create-page .create-appeal__select.create-form__row:has(.input-field--group) { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 768px) { .create-page .create-appeal__select.create-form__row, .create-page .create-appeal__select.create-form__row:has(.input-field--group) { grid-template-columns: 1fr; } } /* ============================================================================ CUSTOM DROPDOWN — Figma'dagi search + list Native (niceSelect yuklanmasa fallback) + niceSelect widget */ .create-page select, .create-page .nice-select { width: 100%; height: 40px; padding: 0 36px 0 var(--space-md); font-family: var(--font-family-base); font-size: 14px; line-height: 38px; color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; cursor: pointer; appearance: none; transition: border-color var(--transition-fast); } /* Native select uchun chevron (faqat fallback holatда ko'rinadi) */ .create-page select { background-image: url("data:image/svg+xml;utf8,"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; } .create-page select:hover, .create-page .nice-select:hover { border-color: var(--border-strong); } .create-page select:focus, .create-page .nice-select.open { border-color: var(--color-primary); } .create-page select:disabled, .create-page .nice-select.disabled { background-color: var(--bg-muted); color: var(--text-muted); cursor: not-allowed; pointer-events: none; } /* niceSelect widget — absolute bolalar (.list, .search) uchun position:relative */ .create-page .nice-select { position: relative; display: block; text-align: left; white-space: nowrap; -webkit-user-select: none; user-select: none; } /* Chevron — ochilganда aylanadi (bitta strelka, background-image emas) */ .create-page .nice-select::after { content: ''; position: absolute; top: 50%; right: 16px; width: 7px; height: 7px; margin-top: -5px; border-bottom: 1.5px solid var(--text-secondary); border-right: 1.5px solid var(--text-secondary); transform: rotate(45deg); transform-origin: 66% 66%; transition: transform var(--transition-fast); pointer-events: none; } .create-page .nice-select.open::after { transform: rotate(-135deg); } /* Tanlangan qiymat matni */ .create-page .nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-primary); } /* Ochiluvchi ro'yxat — absolute, default YASHIRIN, .open'да ochiladi */ .create-page .nice-select .list { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; margin: 0; padding: 4px; list-style: none; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; z-index: 50; opacity: 0; pointer-events: none; transform: scale(0.98) translateY(-6px); transform-origin: 50% 0; transition: opacity 0.12s ease, transform 0.12s ease; } .create-page .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } /* Variantlar */ .create-page .nice-select .option { display: block; list-style: none; cursor: pointer; padding: 8px 12px; font-size: 14px; line-height: 1.4; border-radius: var(--radius-sm); color: var(--text-primary); white-space: normal; } .create-page .nice-select .option:hover, .create-page .nice-select .option.focus { background-color: var(--bg-muted); } .create-page .nice-select .option.selected { font-weight: var(--font-medium); } .create-page .nice-select .option.selected.focus { background-color: var(--color-primary-light); color: var(--color-primary-active); } .create-page .nice-select .option.disabled { color: var(--text-muted); cursor: default; background: transparent; } /* Qidiruv input (search atributli select'lar) — faqat ochilganда, .current ustiga */ .create-page .nice-select .search-nice-select { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 40px; margin: 0; padding: 0 36px 0 var(--space-md); border: none; outline: none; background: transparent; font-family: var(--font-family-base); font-size: 14px; line-height: 40px; color: var(--text-primary); box-sizing: border-box; z-index: 2; } .create-page .nice-select.open .search-nice-select { display: block; } /* ============================================================================ 8) Title input (Введите тему проблемы) ============================================================================ */ .create-page .create-appeal__title { display: flex; flex-direction: column; gap: 6px; margin: 0; } .create-page .create-appeal__title input { width: 100%; height: 40px; padding: 0 var(--space-md); font-family: var(--font-family-base); font-size: 14px; color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast); } .create-page .create-appeal__title input:hover { border-color: var(--border-strong); } .create-page .create-appeal__title input:focus { border-color: var(--color-primary); } .create-page .create-appeal__title input::placeholder { color: var(--text-muted); } /* Eski label (from atribut bilan) yashiramiz — biz yangi label ishlatamiz */ .create-page .create-appeal__title label[from] { display: none; } /* ============================================================================ 9) Description textarea ============================================================================ */ .create-page .create-appeal__textarea { display: flex; flex-direction: column; gap: 6px; margin: 0; } .create-page .create-appeal__textarea textarea, .create-page .create-appeal__textarea #create_preview { width: 100%; max-width: 100%; /* kartadan tashqariga chiqmasin */ min-width: 0; min-height: 120px; padding: var(--space-md); /* Matn HAR DOIM o'raladi. `white-space` ATAYLAB berilmagan: `pre-wrap` bersak, 1C'dan kelgan formatlangan HTML tag'lari orasidagi manba belgilari ko'rinadigan bo'sh qatorlarga aylanardi (12abc4f commit'i tuzatgan xato). Standart `normal` o'raydi; yopishtirilgan inline `pre`/`nowrap` esa 03-base.css'da qaytariladi. `break-word` — uzun URL/token maydondan chiqmasin (`anywhere` EMAS). */ overflow-wrap: break-word; overflow-x: auto; /* eng yomoni: ICHIDA scroll, tashqarida emas */ font-family: var(--font-family-base); font-size: 14px; line-height: 1.5; color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; resize: vertical; transition: border-color var(--transition-fast); } .create-page .create-appeal__textarea textarea:hover, .create-page .create-appeal__textarea #create_preview:hover { border-color: var(--border-strong); } .create-page .create-appeal__textarea textarea:focus, .create-page .create-appeal__textarea #create_preview:focus { border-color: var(--color-primary); } .create-page .create-appeal__textarea textarea::placeholder { color: var(--text-muted); } /* WYSIWYG preview placeholder */ .create-page .create-appeal__textarea #create_preview[contenteditable]:empty::before { content: attr(placeholder); color: var(--text-muted); pointer-events: none; } /* Agar contenteditable preview bo'lsa, textarea yashir */ .create-page .create-appeal__textarea:has(#create_preview) textarea { display: none; } /* Preview ichiga Word/Outlook/1C'dan HTML yopishtiriladi. Inline style stylesheet'dan kuchli — 03-base.css'dagi umumiy qoida ustiga ID specificity'si bilan kafolat qo'yamiz. */ /* Qattiq inline `width` — 03-base.css'dagi umumiy qoida (0,1,0) ustiga ID specificity'si bilan kafolat. Word'dan `

` kelsa ham maydon enidan oshmaydi. */ .create-page .create-appeal__textarea #create_preview [style*="width"] { max-width: 100% !important; } /* ============================================================================ 10) CI multiselect (Configuration items) — chosen plugin ============================================================================ */ .create-page .create-appeal__editor-select { margin-top: var(--space-md); } .create-page .create-appeal__editor-select.visible_off { display: none; } .create-page .label-CI { display: block; font-size: 13px; font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: 6px; } .create-page .chosen-container { width: 100% !important; font-size: 14px; } .create-page .chosen-container-multi .chosen-choices { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); min-height: 40px; padding: 4px 8px; } .create-page .chosen-container-active .chosen-choices { border-color: var(--color-primary); } /* ============================================================================ 11) Predictive articles / CI suggestions ============================================================================ */ .create-page .create-appeal__predictive_articles, .create-page .create-appeal__predictive_ci { margin-top: var(--space-md); padding: var(--space-md); background-color: var(--color-primary-50); border-radius: var(--radius-md); font-size: 13px; } .create-page .create-appeal__predictive_articles .title, .create-page .create-appeal__predictive_ci .title { font-weight: var(--font-semibold); margin-bottom: var(--space-xs); color: var(--text-primary); } /* ============================================================================ 12) File upload + Submit row ============================================================================ */ .create-page .create-appeal__info, .create-page .create-form__bottom { display: flex; align-items: flex-end; /* submit pastga, attach+files yuqoriga */ justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); } /* info-top — attach link + fayl pillar (vertikal stack) */ .create-page .create-appeal__info-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); flex: 1 1 auto; min-width: 0; } .create-page .create-appeal__info_bottom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-left: auto; } /* Attach file label (📎 Прикрепить файл) — Figma: KO'K rang + semibold (600) */ .create-page .attach-file, .create-page .fl_upld { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: var(--space-xs) 0; font-size: 13px; font-weight: var(--font-semibold); /* Figma: 600 */ color: var(--color-info); /* KO'K (Figmadagidek) */ cursor: pointer; background: transparent !important; border: none !important; transition: color var(--transition-fast); } .create-page .attach-file::before, .create-page .fl_upld::before { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: contain; } .create-page .attach-file:hover, .create-page .fl_upld:hover { color: var(--color-info-text); } .create-page .attach-file label, .create-page .fl_upld label { cursor: pointer; display: inline-flex; align-items: center; } /* Fayl input — overlay EMAS. Avval `position:absolute; inset:0` (butun label ustida ko'rinmas, click-ushlaydigan qatlam) edi. style.css yuklanmagani uchun eski `.fl_inp{display:none}` ishlamaydi, natijada bu overlay mobileda "Murojaatni yuborish" tugma ustiga chiqib qolib, submit bosilganda submit o'rniga FAYL DIALOGI ochilardi. Endi input kichik va click-o'tkazmas: fayl dialogi baribir

global selector overrides */ background-color: transparent; height: auto; border: none; border-bottom: none; position: static; top: auto; z-index: auto; } .notifications-header__left { display: flex; align-items: center; gap: var(--space-sm); } .notifications-header__title { margin: 0; font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } /* Count badge — "11 уведомлений" (Figma: light pink/red bg) */ .notifications-header__count { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background-color: #FEE2E2; color: #DC2626; font-size: 12px; font-weight: var(--font-medium); border-radius: var(--radius-sm); line-height: 1; } /* Mark-all-read action — Figma'dagidek double-check (overlapping) icon */ .notifications-header__action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: none; color: var(--text-secondary); font-family: var(--font-family-base); font-size: 13px; font-weight: var(--font-medium); cursor: pointer; text-decoration: none; transition: color var(--transition-fast); } /* Double-check (check-check) — overlapping ikkita check, Lucide icon */ .notifications-header__action-icon { width: 20px; height: 20px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%207%2017l-5-5%22%2F%3E%3Cpath%20d%3D%22m22%2010-7.5%207.5L13%2016%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; flex-shrink: 0; } /* Hover holati — Figmadagidek butun tugma yashilga aylanadi (matn + ikona ikkalasi ham) */ .notifications-header__action:hover { color: var(--color-primary); } .notifications-header__action:hover .notifications-header__action-icon { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316A34A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%207%2017l-5-5%22%2F%3E%3Cpath%20d%3D%22m22%2010-7.5%207.5L13%2016%22%2F%3E%3C%2Fsvg%3E"); } /* ============================================================================ 2) NOTIFICATIONS LIST ============================================================================ */ .notifications-list { display: flex; flex-direction: column; gap: var(--space-md); } /* ============================================================================ 3) NOTIFICATION CARD ============================================================================ */ /* 05-components/notification.css'dagi .notification-card konflikt qiladi (u .notification.notification-card.notification-card__abbreviated kombinatsiyasi uchun). Specificity'ni oshirib o'zimizni override qilamiz */ .notifications-page .notification-card, .notifications-list .notification-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: var(--space-lg); background-color: #F5F5F6 !important; border: 1px solid transparent; border-radius: var(--radius-md); margin-bottom: 0; /* component'dagi margin'ni bekor qilish */ overflow: visible; /* component'dagi overflow:hidden bekor */ transition: border-color var(--transition-fast); } .notification-card:hover { border-color: var(--border-default); } /* Unread state — YANGI bildirishnoma: chap tomonda YASHIL chiziq. Maqsad: foydalanuvchi butun ro'yxatni o'qib chiqmasdan, qaysilari yaqinda kelganini darhol ajratsin (headerdagi qizil indikator bilan bir juftlik). Selektor .notifications-list/.notifications-page bilan berilgan — chunki asosiy .notification-card qoidasi ham shu darajada (0,3,0), aks holda quyidagi .notification-card:hover { border-color } yashil chiziqni bosardi. padding-left 2px ga qisqartirilgan: chegara 1px dan 3px ga o'sdi, ya'ni matn o'z joyida qoladi va karta kengligi o'zgarmaydi. */ .notifications-page .notification-card.is-unread, .notifications-list .notification-card.is-unread { border-left: 3px solid var(--color-primary); padding-left: calc(var(--space-lg) - 2px); } /* ============================================================================ 3.1) Card head — title (chap) + ticket meta (o'ng) IMPORTANT:
global border-bottom, height va sticky'ni bekor qilamiz ============================================================================ */ .notification-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin: 0; flex-wrap: wrap; /* Global
style'larini bekor qilish */ background-color: transparent; height: auto; border: none; border-bottom: none; position: static; top: auto; z-index: auto; } .notification-card__title { margin: 0; font-size: 16px; font-weight: var(--font-semibold); color: var(--text-primary); line-height: 1.4; text-decoration: none; flex: 1 1 auto; min-width: 0; position: static; /* card o'zining position: relative tirnoq nuqtasi bo'lib qolsin */ } .notification-card__title:hover { color: var(--color-primary); } /* STRETCHED LINK — butun card bosilganda detailga o'tsin Title link'ga ::before qo'shamiz va uni card ustiga yoyamiz. Boshqa interaktiv elementlar (state-badge va h.k.) ::before tagidan chiqib qolsin uchun z-index berib qo'yamiz. */ .notification-card__title::before { content: ''; position: absolute; inset: 0; z-index: 1; cursor: pointer; } /* Card ichidagi matn elementlari ::before tagida qolmasin — z-index sozlash */ .notification-card__ticket, .notification-card__author, .notification-card__timeline, .notification-card__right, .notification-card__footer, .notification-card__comment, .state-badge { position: relative; z-index: 2; } /* Title hover effekti — endi butun card hover'i */ .notification-card:hover .notification-card__title { color: var(--color-primary); } .notification-card__ticket { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 14px; /* Maket 14px edi, verstkada 12px qolib ketgan */ color: var(--text-tertiary); white-space: nowrap; } .notification-card__ticket-icon { width: 14px; height: 14px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; flex-shrink: 0; } .notification-card__ticket-sep { color: var(--text-muted); margin: 0 2px; } /* ============================================================================ 3.2) Card body — 4-bo'lim grid ============================================================================ */ .notification-card__body { display: grid; grid-template-columns: 220px 1fr 1fr 280px; gap: var(--space-lg); align-items: start; margin: 0; } @media (max-width: 1024px) { .notification-card__body { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .notification-card__body { grid-template-columns: 1fr; gap: var(--space-md); } } /* ============================================================================ 3.3) Author column ============================================================================ */ .notification-card__author { display: flex; flex-direction: column; gap: 4px; } .notification-card__author-name { font-size: 14px; font-weight: var(--font-medium); color: var(--text-primary); } .notification-card__author-client { font-size: 12px; color: var(--text-tertiary); } .notification-card__author-date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-tertiary); } .notification-card__author-icon { width: 12px; height: 12px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A3A3A3%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; flex-shrink: 0; } /* ============================================================================ 3.4) Timeline column — "Изменения состояния" + "Последнее состояние" ============================================================================ */ .notification-card__timeline { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: center; } @media (max-width: 1024px) { .notification-card__timeline { grid-column: span 1; } } .notification-card__timeline-item { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; gap: 8px; } /* Figma layout: [---dashed---] [Изменения состояния] [Последнее состояние] [---dashed---] ya'ni: 1-label CHAP'da dashed, 2-label O'NG'da dashed. O'rtasida hech narsa yo'q. */ /* 1-label — faqat CHAP dashed */ .notification-card__timeline-item:first-child::before { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--border-default); min-width: 12px; } .notification-card__timeline-item:first-child::after { display: none; } /* 2-label — faqat O'NG dashed */ .notification-card__timeline-item:last-child::before { display: none; } .notification-card__timeline-item:last-child::after { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--border-default); min-width: 12px; } .notification-card__timeline-label { display: inline-block; padding: 4px 10px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--font-medium); color: var(--text-tertiary); white-space: nowrap; letter-spacing: 0.2px; } /* ============================================================================ 3.5) Right column — Решение box + Статус ============================================================================ */ .notification-card__right { display: flex; flex-direction: column; gap: var(--space-sm); } /* Solution box — "Решение: text..." */ .notification-card__solution { padding: 10px 12px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); } .notification-card__solution-label { font-size: 12px; font-weight: var(--font-medium); color: var(--text-tertiary); margin-bottom: 4px; } .notification-card__solution-text { font-size: 13px; color: var(--text-primary); line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; /* DEV-3773 */ /* Faqat 3 qator ko'rsatamiz */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Status row — "Статус: 🟡 Зарегистрировано" Figma: "Статус:" labeli + rangli DOT + state matni */ .notification-card__status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; /* Maket 14px edi, verstkada 12px qolib ketgan */ align-self: flex-end; /* Button reset (status interactive bo'lganda) */ background: transparent; border: none; padding: 4px 8px; margin: -4px -8px; font-family: inherit; color: inherit; } /* (eski accordion-toggle styles olib tashlandi — status'ga click endi kerak emas) */ .notification-card__status-label { color: var(--text-tertiary); } .notification-card__status-value { color: var(--text-primary); font-weight: var(--font-medium); } /* ============================================================================ 3.5.1) STATUS DOT — rangli indikator .notification-card__status-dot.state-badge--green → yashil dot .notification-card__status-dot.state-badge--yellow → sariq dot .notification-card__status-dot.state-badge--red → qizil dot .notification-card__status-dot.state-badge--blue → ko'k dot .notification-card__status-dot.state-badge--dark → qora dot .notification-card__status-dot.state-badge--neutral → kulrang dot ============================================================================ */ .notification-card__status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background-color: #D1D5DB; /* default — neutral kulrang */ } .notification-card__status-dot.state-badge--green { background-color: #22C55E; } .notification-card__status-dot.state-badge--yellow { background-color: #F59E0B; } .notification-card__status-dot.state-badge--red { background-color: #EF4444; } .notification-card__status-dot.state-badge--blue { background-color: #3B82F6; } .notification-card__status-dot.state-badge--purple { background-color: #A855F7; } .notification-card__status-dot.state-badge--dark { background-color: #1A1A1A; } .notification-card__status-dot.state-badge--orange { background-color: #FB923C; } .notification-card__status-dot.state-badge--sky { background-color: #7DD3FC; } .notification-card__status-dot.state-badge--neutral { background-color: #D1D5DB; } /* ============================================================================ 3.6) Card footer — "Новое значение: status_badge" ============================================================================ */ .notification-card__footer { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: 0; margin: 0; /* Figma: divider chiziq yo'q, spacing parent gap'idan keladi */ } .notification-card__new-value-label { font-size: 13px; color: var(--text-tertiary); } .notification-card__new-value-text { font-size: 13px; font-weight: var(--font-medium); color: var(--text-primary); } /* "Holati" label — agar "Yangi qiymat" ham bo'lsa, oldidan ajratuvchi visual gap ko'rsatamiz (vertical divider yoki margin) */ .notification-card__footer .notification-card__footer-status-label { margin-left: var(--space-md); position: relative; } /* Subtle separator (faqat oldida "Yangi qiymat" matni bor bo'lsa) */ .notification-card__footer .notification-card__new-value-text + .notification-card__footer-status-label::before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: var(--border-default); margin-right: var(--space-md); vertical-align: middle; } /* State badge — Figma'dagi yangi DOT+TEXT format appeals.css'da global beriladi (orqa fon yo'q, faqat ::before rangli dumaloq) */ /* ============================================================================ 3.7) Comment & files (subtle) ============================================================================ */ .notification-card__comment { margin-top: var(--space-sm); padding: var(--space-sm); background-color: var(--bg-surface); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .notification-card__comment p { margin: 0; } .notification-card__files { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); } .notification-card__file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--color-info); text-decoration: none; transition: border-color var(--transition-fast); } .notification-card__file::before { content: ''; width: 12px; height: 14px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; flex-shrink: 0; } .notification-card__file:hover { border-color: var(--color-info); } /* Action buttons (confirmation/approval) */ .notification-card__actions { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; } .notification-card__actions-text { margin-right: auto; font-size: 13px; color: var(--text-secondary); } /* Подтвердите / Утвердите buttons — Figma uchun */ .notification-card__actions .btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; height: 36px; font-size: 13px; font-weight: var(--font-medium); border-radius: 8px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast); position: relative; z-index: 2; /* stretched link ostida qolmasin */ } /* Ghost — "Отклонить" — oq fon, oq border, qora matn */ .notification-card__actions .btn--ghost { background-color: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } .notification-card__actions .btn--ghost:hover { background-color: var(--bg-muted); border-color: var(--border-strong); } /* Primary — "Подтвердить" — yashil to'la */ .notification-card__actions .btn--primary { background-color: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); } .notification-card__actions .btn--primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* ============================================================================ 3.7.1) INLINE ACTIONS — har doim ko'rinadi (ТребуетПодтверждения=Да) Chap: avval yuborilgan comment (agar bor) + chat-style input O'ng: "Подтвердите..." text + Отклонить/Подтвердить tugmalari ============================================================================ */ .notification-card__inline-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: end; padding-top: var(--space-md); position: relative; z-index: 2; } .notification-card__inline-left { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; } /* Avval yuborilgan comment ("Текст комментария") + sana */ .notification-card__inline-existing { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 8px 14px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; font-size: 13px; } .notification-card__inline-existing-text { color: var(--text-primary); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notification-card__inline-existing-date { color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; } @media (max-width: 768px) { .notification-card__inline-actions { grid-template-columns: 1fr; gap: var(--space-sm); } } /* ============================================================================ 3.7.2) CHAT-STYLE COMMENT INPUT (Figma) ============================================================================ */ .notification-card__inline-comment { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; position: relative; min-width: 0; transition: border-color var(--transition-fast); } .notification-card__inline-comment:focus-within { border-color: var(--color-primary); } .notification-card__inline-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0; background: transparent; border: none; outline: none; font-size: 13px; color: var(--text-primary); font-family: var(--font-family-base); } .notification-card__inline-input::placeholder { color: var(--text-muted); } /* Paperclip (attach) */ .notification-card__inline-attach { width: 32px; height: 32px; flex-shrink: 0; background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat; border: none; border-radius: 8px; cursor: pointer; transition: background-color var(--transition-fast); } .notification-card__inline-attach:hover { background-color: var(--bg-muted); } /* Send button (green) — icon + loading spinner switchable */ .notification-card__inline-send { position: relative; width: 32px; height: 32px; flex-shrink: 0; background-color: var(--color-primary); border: none; border-radius: 8px; cursor: pointer; padding: 0; transition: background-color var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .notification-card__inline-send:hover { background-color: var(--color-primary-hover); } .notification-card__inline-send:disabled { cursor: wait; background-color: var(--color-primary); opacity: 0.85; } .notification-card__inline-send-icon { display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .notification-card__inline-send-spinner { display: none; width: 16px; height: 16px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; animation: spinner-rotate 900ms linear infinite; } .notification-card__inline-send.is-loading .notification-card__inline-send-icon { display: none; } .notification-card__inline-send.is-loading .notification-card__inline-send-spinner { display: inline-block; } /* Error matn */ .notification-card__inline-error { position: absolute; bottom: -20px; left: 0; font-size: 11px; color: var(--color-danger); } /* ============================================================================ 3.7.3) CONFIRM/REJECT BUTTONS (right side) ============================================================================ */ .notification-card__inline-confirm { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); flex-shrink: 0; } .notification-card__inline-prompt { font-size: 12px; color: var(--text-secondary); text-align: right; } /* Two-button row: Отклонить + Подтвердить */ .notification-card__inline-buttons { display: flex; align-items: center; gap: var(--space-sm); } .notification-card__inline-confirm .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 110px; height: 36px; padding: 0 16px; font-size: 13px; font-weight: var(--font-medium); border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast); } /* Btn label/spinner — default va loading holatlar */ .notification-card__inline-confirm .btn__label { display: inline-block; transition: opacity 0.15s ease; } .notification-card__inline-confirm .btn__spinner { display: none; position: absolute; width: 16px; height: 16px; animation: spinner-rotate 900ms linear infinite; } /* Primary (yashil) — oq spinner */ .notification-card__inline-confirm .btn--primary .btn__spinner { background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } /* Ghost (outline) — yashil spinner */ .notification-card__inline-confirm .btn--ghost .btn__spinner { background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2318B83C%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-6.219-8.56%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } /* Loading state — label fades out, spinner appears */ .notification-card__inline-confirm .btn.is-loading { cursor: wait; pointer-events: none; } .notification-card__inline-confirm .btn.is-loading .btn__label { opacity: 0; } .notification-card__inline-confirm .btn.is-loading .btn__spinner { display: block; } /* Disabled (boshqa tugma loading bo'lganida) */ .notification-card__inline-confirm .btn:disabled:not(.is-loading) { opacity: 0.5; cursor: not-allowed; } .notification-card__inline-confirm .btn--ghost { background-color: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } .notification-card__inline-confirm .btn--ghost:hover { background-color: var(--bg-muted); border-color: var(--border-strong); } .notification-card__inline-confirm .btn--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; } .notification-card__inline-confirm .btn--primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* Mobile — prompt va tugmalar full-width */ @media (max-width: 768px) { .notification-card__inline-confirm { align-items: stretch; } .notification-card__inline-prompt { text-align: left; } .notification-card__inline-buttons .btn { flex: 1 1 50%; } } /* ============================================================================ 3.8) COMMENT INPUT — Figma: yengil chat-style input + paperclip + send tugma Faqat ТребуетПодтверждения/ТребуетСогласования notifyalarda ko'rinadi ============================================================================ */ .notifications-page .notification-comment, .notifications-list .notification-comment { margin-top: var(--space-sm); padding-top: 0; border-top: none; position: relative; z-index: 2; /* stretched link ostida qolmasin */ } .notifications-page .notification-comment__item, .notifications-list .notification-comment__item { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: transparent; border: 1px solid var(--border-default); border-radius: 10px; margin-bottom: 0; } .notifications-page .notification-comment__field, .notifications-list .notification-comment__field { flex: 1 1 auto; min-height: 0; width: auto; padding: 0; background: transparent; border: none; box-shadow: none; } .notifications-page .notification-comment__field:focus, .notifications-list .notification-comment__field:focus { box-shadow: none; outline: none; } .notifications-page .notification-comment__field input, .notifications-list .notification-comment__field input { width: 100%; height: 34px; padding: 0; background: transparent; border: none; outline: none; font-size: 13px; color: var(--text-primary); } .notifications-page .notification-comment__field input::placeholder, .notifications-list .notification-comment__field input::placeholder { color: var(--text-muted); } /* Paperclip (attach) — fl_upld label */ .notifications-page .notification-comment .fl_upld, .notifications-list .notification-comment .fl_upld { order: 1; /* paperclip — send tugmadan oldin */ flex-shrink: 0; } .notifications-page .notification-comment .fl_upld label, .notifications-list .notification-comment .fl_upld label { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; border-radius: 8px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/16px no-repeat; transition: background-color var(--transition-fast); } .notifications-page .notification-comment .fl_upld label:hover, .notifications-list .notification-comment .fl_upld label:hover { background-color: var(--bg-muted); } .notifications-page .notification-comment .fl_inp, .notifications-list .notification-comment .fl_inp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .notifications-page .notification-comment .fl_nm_container, .notifications-list .notification-comment .fl_nm_container { flex-basis: 100%; order: 3; margin: 0; } .notifications-page .notification-comment .fl_nm_container:empty, .notifications-list .notification-comment .fl_nm_container:empty { display: none; } /* Send button — yashil + ok ikona */ .notifications-page .notification-comment__submit, .notifications-list .notification-comment__submit { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; background-color: var(--color-primary); border: none; border-radius: 8px; flex-shrink: 0; text-decoration: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px; transition: background-color var(--transition-fast); } .notifications-page .notification-comment__submit:hover, .notifications-list .notification-comment__submit:hover { background-color: var(--color-primary-hover); } /* ============================================================================ 4) EMPTY STATE ============================================================================ */ .notifications-empty { display: flex; align-items: center; justify-content: center; padding: var(--space-3xl) var(--space-lg); text-align: center; background: transparent; } .notifications-empty__text { margin: 0; font-size: var(--font-md); color: var(--text-tertiary); font-weight: var(--font-regular); /* ma'lumot yo'q ogohlantirishi — 400 */ line-height: 1.5; } /* ============================================================================ 5) PAGINATION ============================================================================ */ .notifications-pagination { margin-top: var(--space-xl); } /* ============================================================================ 6) BANNER (xato xabarlari) ============================================================================ */ .notification-banner { margin-bottom: var(--space-md); padding: 10px 14px; background-color: var(--color-status-danger-bg); border: 1px solid var(--color-status-danger); border-radius: var(--radius-md); } /* ============================================================================ 7) HEADER MENU notification badge (count) Figma: badge link matnining CHAP tomonida — qizil to'la doira ============================================================================ */ .menu-notification { display: inline-flex; align-items: center; gap: 6px; } .menu-notification .menu-count { position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background-color: var(--color-danger); color: var(--color-white, #ffffff); font-size: 10px; font-weight: var(--font-bold); border-radius: var(--radius-full); line-height: 1; flex-shrink: 0; } .menu-notification__text { display: inline-block; } /* ============================================================================ 8) MOBILE ============================================================================ */ @media (max-width: 768px) { .notifications-header { flex-direction: column; align-items: flex-start; } .notification-card__head { flex-direction: column; gap: var(--space-xs); } /* font-size bu yerdan OLIB TASHLANDI: maket 14px talab qiladi va bu ilova WebView sifatida ham ishlaydi, ya'ni mobil eng asosiy platforma. Mobil uchun alohida qiymat qoldirilsa, o'lcham ikkita manbadan boshqarilardi va desktop qiymati o'zgarganda mobil eskisicha qolib ketardi. Endi .notification-card__ticket o'lchami faqat bitta joyda (yuqorida, 14px). */ .notification-card__body { grid-template-columns: 1fr; } .notification-card__timeline { grid-template-columns: 1fr; gap: var(--space-sm); } .notification-card__timeline-item::before, .notification-card__timeline-item::after { display: none; } } /* ============================================================================= 06/Pages — Ticket detail (card.php) — 100% Figma match ----------------------------------------------------------------------------- Sections: 1. Breadcrumb 2. Header (back + title + date + status badge) 3. Info card (gray, expandable) — title, description, deadline, files, service 4. Chat (messages + comment input) ========================================================================== */ .ticket-page { padding: var(--space-xl) 0 var(--space-2xl); min-height: 70vh; } /* ============================================================================ 1) HEADER ============================================================================ */ .ticket-page__header { position: relative; margin-bottom: var(--space-sm); /* Figma: kichik gap date va info-card o'rtasida */ /* Override global
styles — KRITIK: display:flex'ni bekor qilish */ display: block; /* Global header { display:flex } ni override */ align-items: initial; background-color: transparent; height: auto; border: none; border-bottom: none; top: auto; z-index: auto; } .ticket-page__title-row { display: flex; align-items: center; gap: var(--space-sm); } /* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */ .ticket-page__back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat; border: none; cursor: pointer; font-size: 0; color: transparent; text-decoration: none; border-radius: var(--radius-md); transition: background-color var(--transition-fast), opacity var(--transition-fast); } .ticket-page__back:hover { background-color: var(--bg-muted); opacity: 0.8; } .ticket-page__title { margin: 0; font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } .ticket-page__title-number { font-weight: var(--font-bold); } /* Date — Figma: title ostida + card ustida kichik gap */ .ticket-page__date { font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-md); /* Title'dan clear gap */ margin-left: 0; /* Card edge bilan tekislash */ margin-bottom: 0; /* Figma: card bilan kichik gap (header margin-bottom yetadi) */ } /* Status badge — top right corner */ .ticket-page__status { position: absolute; top: 0; right: 0; max-width: 45%; text-align: right; } /* DEV-3773: badge absolute bo'lgani uchun uzun sarlavha/status'da matn ustiga tushardi. Desktop'da unga joy zaxiralaymiz, mobil'da oqimga qaytaramiz. */ .ticket-page__header { padding-right: 220px; } @media (max-width: 640px) { .ticket-page__header { padding-right: 0; } .ticket-page__status { position: static; display: inline-flex; max-width: 100%; margin-top: var(--space-sm); } } /* ============================================================================ 2) BANNER (error msgs) ============================================================================ */ .ticket-banner { margin-bottom: var(--space-md); padding: 10px 14px; background-color: var(--color-status-danger-bg); border: 1px solid var(--color-status-danger); border-radius: var(--radius-md); } /* ============================================================================ 3) TICKET INFO CARD — kulrang fon, expandable ============================================================================ */ .ticket-info-card { position: relative; padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 14px); background-color: #F5F5F6; border-radius: var(--radius-md); margin-bottom: var(--space-xl); transition: padding var(--transition-base); } /* DEV-3773 — matn vertikal (bir harfdan) chiqish bug'i. SABAB: 2/3-ustun maksimumi `auto` edi → max-content'gacha cho'zilardi. `is-collapsed` holatda yashiringan (max-height:0) yechim/servis matni BALANDLIGI nolga tushsa ham KENGLIGIGA hissa qo'shishda davom etadi, shuning uchun 2-ustun ulkan bo'lib, `1fr` bo'lgan 1-ustun min-content (= bitta harf) gacha qisilardi. Endi hamma ustun `fr` maksimum bilan chegaralangan va matn ustuniga 320px kafolatlangan pol berilgan. */ .ticket-info-card__main { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(160px, 1fr) minmax(150px, 1fr); gap: var(--space-lg); align-items: flex-start; } @media (max-width: 900px) { .ticket-info-card__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 640px) { .ticket-info-card__main { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } } /* LEFT column — title + description */ .ticket-info-card__primary { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ticket-info-card__title { margin: 0; font-size: 14px; font-weight: var(--font-semibold); color: var(--text-primary); line-height: 1.4; overflow-wrap: break-word; /* DEV-3773: uzun so'z ustundan toshib, yonidagi sana ustiga tushmasin */ } .ticket-info-card__description { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; /* DEV-3773: `word-break: break-word` = `overflow-wrap: anywhere` → min-content bitta harfga tushib, ustun qisilishiga yo'l ochardi. `overflow-wrap` bir xil o'raydi (uzun URL baribir uziladi), lekin min-content'ni buzmaydi. */ overflow-wrap: break-word; } .ticket-info-card__description img { max-width: 100%; height: auto; } /* Additional dop fields */ .ticket-info-card__dop { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px; } .ticket-info-card__dop-item { margin: 0; font-size: 13px; color: var(--text-secondary); } /* MIDDLE column — meta (deadline, service, etc) */ .ticket-info-card__meta { display: flex; flex-direction: column; gap: var(--space-sm); } .ticket-info-card__field { display: flex; flex-direction: column; gap: 4px; } .ticket-info-card__field-label { font-size: 12px; color: var(--text-tertiary); line-height: 1.3; } .ticket-info-card__field-value { font-size: 14px; color: var(--text-primary); font-weight: var(--font-medium); line-height: 1.4; overflow-wrap: break-word; /* DEV-3773 */ } .ticket-info-card__field-value.is-overdue { color: var(--color-danger); } .ticket-info-card__solution { font-weight: var(--font-regular); white-space: normal; } /* Yechim matni "qanday yozsa xuddi shunday" chiqishi uchun ichki elementlar margin'ini reset qilamiz (xabar matni bilan bir xil). Katta bo'shliq bekor. */ .ticket-info-card__solution p { margin: 0 0 6px; } .ticket-info-card__solution p:last-child { margin-bottom: 0; } .ticket-info-card__solution img { max-width: 100%; height: auto; } /* RIGHT column — files */ .ticket-info-card__files { display: flex; flex-direction: column; gap: 6px; } .ticket-info-card__files-list { display: flex; flex-direction: column; gap: 4px; } /* Expanded-only fields — smooth accordion animation (shadcn style) */ .ticket-info-card__expanded-only { overflow: hidden; max-height: 3000px; opacity: 1; margin-top: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease 0.1s, margin-top 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease; } /* Collapsed state — smooth fade + slide up */ .ticket-info-card.is-collapsed .ticket-info-card__expanded-only { max-height: 0; opacity: 0; margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, margin-top 0.3s ease; } /* Hover/focus expand */ .ticket-info-card__expanded-only:not(:empty) { /* default visible state inherited */ } /* ============================================================================ 3.1) FILE chip (universal — info card va xabarlarda) ============================================================================ */ .ticket-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--color-info); text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast); max-width: 100%; } .ticket-file__icon { width: 12px; height: 14px; flex-shrink: 0; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .ticket-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ticket-file:hover { border-color: var(--color-info); } /* ============================================================================ 3.2) EXPAND/COLLAPSE TOGGLE button ============================================================================ */ .ticket-info-card__toggle { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--color-info); font-family: var(--font-family-base); font-size: 12px; font-weight: var(--font-medium); cursor: pointer; white-space: nowrap; transition: background-color var(--transition-fast), border-color var(--transition-fast); z-index: 1; } .ticket-info-card__toggle:hover { background-color: var(--bg-muted); border-color: var(--color-info); } .ticket-info-card__toggle-icon { width: 10px; height: 10px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233B82F6%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; transition: transform var(--transition-fast); } .ticket-info-card:not(.is-collapsed) .ticket-info-card__toggle-icon { transform: rotate(180deg); } /* ============================================================================ 4) ACTION buttons (Confirm / Approve) ============================================================================ */ .ticket-actions { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); padding: var(--space-md); background-color: var(--bg-muted); border-radius: var(--radius-md); } .ticket-actions__text { margin-right: auto; font-size: 13px; color: var(--text-secondary); } /* ============================================================================ 5) CHAT — messages + input ============================================================================ */ .ticket-chat { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .ticket-chat__messages { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg) var(--space-2xl); /* Figma: ikki tomondan keng (48px) */ max-height: 60vh; overflow-y: auto; } /* ============================================================================ 5.1) Message bubble ============================================================================ */ .ticket-message { display: flex; flex-direction: column; gap: 4px; max-width: 70%; padding: 12px 14px; background-color: #F5F5F6; /* Figma: barcha message uchun bir xil */ border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; } @media (max-width: 640px) { .ticket-message { max-width: 90%; } } /* MY message — RIGHT-aligned, #F5F5F6 (Figma: yashil emas) */ .ticket-message--mine { align-self: flex-end; background-color: #F5F5F6; /* Figma: theirs bilan bir xil neutral */ } .ticket-message--mine .ticket-message__author { color: var(--text-primary); /* Figma: yashil emas, neytral qora */ } /* THEIR messages — LEFT-aligned, #F5F5F6 */ .ticket-message--theirs { align-self: flex-start; background-color: #F5F5F6; } .ticket-message--theirs .ticket-message__author { color: var(--text-primary); } /* Author — KATTAROQ + BOLD + UPPERCASE (Figma'da name dominant) */ .ticket-message__author { font-size: 12px; font-weight: var(--font-bold); letter-spacing: 0.5px; color: var(--text-primary); text-transform: uppercase; line-height: 1.3; margin-bottom: 4px; } /* Text — KICHIKROQ + REGULAR (name'dan kichik va engil) */ .ticket-message__text { font-size: 13px; font-weight: var(--font-regular); color: var(--text-secondary); line-height: 1.5; overflow-wrap: break-word; /* DEV-3773 */ } .ticket-message__text p { margin: 0 0 6px; } .ticket-message__text p:last-child { margin-bottom: 0; } .ticket-message__text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .ticket-message__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ticket-message__date { align-self: flex-end; font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ============================================================================ 5.2) Comment input — Figma: rounded gray bar, attach + send buttons ============================================================================ */ /* Compose container — Figma: ikki tomondan keng padding (48px) */ .ticket-chat__compose { padding: var(--space-md) var(--space-2xl); /* 16px 48px — Figma keng inset */ background-color: var(--bg-surface); } /* Compose ichki container — Figma: #F5F5F6 fon, border yo'q */ .ticket-chat__input, .ticket-chat__compose .notification-comment__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 14px !important; background-color: #F5F5F6 !important; /* Figma: input wrapper #F5F5F6 */ border: 1px solid transparent !important; /* Default: ko'rinmaydigan border */ border-radius: var(--radius-md) !important; min-height: 0; transition: border-color var(--transition-fast); } .ticket-chat__input:focus-within { border-color: var(--color-primary) !important; } /* Field container — flex 1 1 auto */ .ticket-chat__compose .notification-comment__field { width: auto !important; min-height: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } /* notification-comment umumiy padding/margin — bekor */ .ticket-chat__compose.notification-comment { margin-top: 0; padding-top: 12px; border-top: none; } .ticket-chat__field { flex: 1 1 auto; min-width: 0; } .ticket-chat__field input, .ticket-chat__field textarea { width: 100%; height: 32px; padding: 0; background: transparent; border: none; outline: none; font-family: var(--font-family-base); font-size: 13px; color: var(--text-primary); -webkit-appearance: none; appearance: none; box-shadow: none; display: block; margin: 0; } .ticket-chat__field input::placeholder, .ticket-chat__field textarea::placeholder { color: var(--text-muted); opacity: 1; } /* Attach button — paperclip icon */ .ticket-chat__attach { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; align-self: center; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E") center/18px no-repeat; border: none; cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; /* native fayl-input shadow tugmasi 32px'dan tashqariga chiqmasin */ transition: background-color var(--transition-fast); flex-shrink: 0; } .ticket-chat__attach:hover { background-color: rgba(0, 0, 0, 0.05); background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 18px; } .ticket-chat__attach .fl_inp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; /* input HECH QACHON pointer target emas → submit bosilsa fayl oynasi OCHILMAYDI. Label (.ticket-chat__attach) bosilsa dialog baribir ochiladi (native label→input) */ } /* Send button — Figma: yashil rounded, oq strelka. IMPORTANT: 05-components/notification.css'dagi margin-top'ni bekor qilamiz */ .ticket-chat__submit, .ticket-chat__compose .notification-comment__submit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; background-color: var(--color-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; flex-shrink: 0; align-self: center; font-size: 0; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%2219%22%20x2%3D%2212%22%20y2%3D%225%22%2F%3E%3Cpolyline%20points%3D%225%2012%2012%205%2019%2012%22%2F%3E%3C%2Fsvg%3E"); background-position: center; background-repeat: no-repeat; background-size: 18px; transition: background-color var(--transition-fast), transform var(--transition-fast); } .ticket-chat__submit:hover { background-color: var(--color-primary-hover); transform: translateY(-1px); } /* Paperclip ↔ send orasini biroz ochamiz + send tugmasi HAR DOIM ustda turadi (positsiyalangan .ticket-chat__attach tagiga tushib qolmasligi uchun z-index) */ .ticket-chat__input .ticket-chat__submit { position: relative; z-index: 1; margin-left: var(--space-sm) !important; /* flex gap 6px + 8px = ~14px ochiq oraliq */ } /* fl_nm_container — endi .ticket-chat__input ICHIDA (main.js path lookup uchun). Flex'da to'liq kenglik bilan yangi qatorga tushadi */ .ticket-chat__compose .fl_nm_container { flex: 0 0 100%; width: 100%; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 8px; } .ticket-chat__compose .fl_nm_container:empty { display: none; margin: 0; padding: 0; } .ticket-chat__compose .fl_nm_container .fl_nm { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 10px; background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-primary); position: static !important; width: auto !important; max-width: 100%; height: auto !important; margin: 0 !important; background-image: none !important; overflow: hidden; min-width: 0; } .ticket-chat__compose .fl_nm_container .fl_nm.active { display: inline-flex !important; } .ticket-chat__compose .fl_nm_container .fl_nm::before { content: ''; width: 12px; height: 14px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .ticket-chat__compose .fl_nm_container .fl_nm .fl_nm__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ticket-chat__compose .fl_nm_container .fl_nm .delete { position: static !important; width: 14px !important; height: 14px !important; margin-left: 4px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EF4444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat !important; cursor: pointer; font-size: 0; } /* ============================================================================ 5.3) Closed state ============================================================================ */ .ticket-chat__closed { padding: var(--space-xl); text-align: center; background-color: var(--bg-muted); } .ticket-chat__closed p { margin: 0 0 var(--space-md); font-size: 13px; color: var(--text-secondary); } /* ============================================================================ 6) TICKET MODAL OVERLAY — FancyBox'siz mustaqil markazlashgan modal ============================================================================ */ .ticket-modal-overlay { position: fixed; inset: 0; background-color: rgba(23, 23, 23, 0.5); z-index: var(--z-modal, 1000); display: none; align-items: center; justify-content: center; padding: var(--space-md); overflow-y: auto; } .ticket-modal-overlay.is-active { display: flex; animation: fadeIn 0.2s ease; } .ticket-modal-overlay .modal { display: block; position: relative; width: 380px; max-width: 90vw; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl, 0 4px 24px rgba(0,0,0,0.15)); padding: var(--space-xl) var(--space-lg); animation: slideUp 0.25s ease; } .ticket-modal-overlay .modal h4 { font-size: var(--font-md); font-weight: var(--font-semibold); color: var(--text-primary); text-align: center; margin: 0 0 var(--space-lg); line-height: 1.3; } .ticket-modal-overlay .modal .star-list { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: var(--space-lg); direction: rtl; } .ticket-modal-overlay .modal .star-list input[type="radio"] { display: none; } .ticket-modal-overlay .modal .star-list label { display: inline-block; width: 36px; height: 36px; cursor: pointer; background: url('/itilium/themes/img/icons/star.svg') center/36px no-repeat; transition: transform 0.15s ease; } .ticket-modal-overlay .modal .star-list label:hover { transform: scale(1.15); } .ticket-modal-overlay .modal .star-list input:checked + label, .ticket-modal-overlay .modal .star-list input:checked ~ label { background-image: url('/itilium/themes/img/icons/star-blue.svg'); } .ticket-modal-overlay .modal .input-field { margin-bottom: var(--space-lg); } .ticket-modal-overlay .modal .input-field input.re-form-input { width: 100%; height: var(--input-height-md, 44px); padding: 0 var(--space-md); font-family: var(--font-family-base); font-size: var(--font-base); color: var(--text-primary); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ticket-modal-overlay .modal .input-field input.re-form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(24, 184, 60, 0.12); outline: none; } .ticket-modal-overlay .modal .input-field label { display: none; } .ticket-modal-overlay .modal .input-error__text { font-size: var(--font-sm); color: var(--color-danger); text-align: center; min-height: 0; } .ticket-modal-overlay .modal .align-center { text-align: center; } .ticket-modal-overlay .modal .btn-blue { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; background-color: var(--color-primary); color: var(--text-on-primary); font-size: 14px; font-weight: var(--font-semibold); border: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast); } .ticket-modal-overlay .modal .btn-blue:hover { background-color: var(--color-primary-hover); } .ticket-modal-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--bg-muted); border: none; border-radius: var(--radius-full, 50%); cursor: pointer; transition: background-color var(--transition-fast); } .ticket-modal-close:hover { background-color: var(--color-gray-200); } .ticket-modal-close svg { width: 14px; height: 14px; } /* ============================================================================ 7) MOBILE ============================================================================ */ @media (max-width: 768px) { .ticket-page__title { font-size: var(--font-xl); } .ticket-page__status { position: static; margin-top: var(--space-sm); display: inline-flex; } .ticket-info-card { padding: var(--space-md) var(--space-md) calc(var(--space-md) + 14px); } .ticket-chat__messages { padding: var(--space-md); max-height: 50vh; } .ticket-chat__compose { padding: var(--space-sm) var(--space-md); } .ticket-modal-overlay { padding: var(--space-sm); } .ticket-modal-overlay .modal { width: 100%; max-width: 100%; padding: var(--space-lg) var(--space-md); border-radius: var(--radius-md); } .ticket-modal-overlay .modal .star-list label { width: 32px; height: 32px; background-size: 32px; } } /* ============================================================================= 06/Pages — Subcategory (templateCategories.php / template.php) ----------------------------------------------------------------------------- Figma: - Breadcrumb: Регистрация обращения > General - Title with back arrow: "← IT Teknik bo'lim" - Search input (yumaloq, kichik) - Empty state (search natija yo'q bo'lsa) - Cards grid 3-column ========================================================================== */ /* Subcategory sahifasi: gradient YO'Q (faqat home'da) */ .subcategory-page.page_template { padding: var(--space-xl) 0 var(--space-3xl); } .subcategory-page.page_template::before { display: none; /* Hero gradient yo'q */ } .subcategory-page.page_template .container { display: flex; flex-direction: column; } /* Container ichidagi tartibi (CSS flex order bilan) */ .subcategory-page .breadcrumbs { order: 1; } .subcategory-page .subcategory-page__title { order: 2; } .subcategory-page .create-appeal__head { order: 3; } .subcategory-page .search-empty-state { order: 4; } .subcategory-page .templates { order: 5; } /* ============================================================================ Title with back arrow ============================================================================ */ .subcategory-page__title { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0 0 var(--space-lg); } /* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */ .subcategory-page__back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat; border: none; cursor: pointer; font-size: 0; /* hidden ← character if any */ color: transparent; text-decoration: none; border-radius: var(--radius-md); transition: background-color var(--transition-fast), opacity var(--transition-fast); } .subcategory-page__back:hover { background-color: var(--bg-muted); opacity: 0.8; } /* ============================================================================ Search section — markazda, max-width (Figma'dagidek qisqaroq) ============================================================================ */ .subcategory-page .create-appeal__head { display: flex; justify-content: center; margin: 0 auto var(--space-xl); width: 100%; max-width: 480px; } .subcategory-page .create-appeal__head .search { width: 100%; } /* ============================================================================ Templates grid (cards) ============================================================================ */ .subcategory-page .templates { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } @media (max-width: 1024px) { .subcategory-page .templates { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .subcategory-page .templates { grid-template-columns: 1fr; } } /* Subcategory cards — biroz boshqacha (comment matni katta bo'lishi mumkin) */ .subcategory-page .templates .template, .subcategory-page .templates .category { padding: var(--space-md) var(--space-lg); padding-right: 56px; min-height: 88px; /* Comment bo'lsa ko'proq joy */ align-items: flex-start; } .subcategory-page .templates .template .text, .subcategory-page .templates .category .text { align-self: center; } .subcategory-page .templates .template .name, .subcategory-page .templates .category .name { font-size: var(--font-sm); font-weight: var(--font-semibold); line-height: var(--leading-snug); margin-bottom: 4px; } .subcategory-page .templates .template .comment, .subcategory-page .templates .category .comment { font-size: var(--font-xs); color: var(--text-tertiary); line-height: var(--leading-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ Empty state ============================================================================ */ .subcategory-page .search-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--text-muted); } /* ============================================================================ Mobile ============================================================================ */ @media (max-width: 768px) { .subcategory-page__title { font-size: var(--font-lg); } } /* ============================================================================= 06/Pages — Logout (quit.php) — Akkayntdan chiqqandan keyin ----------------------------------------------------------------------------- Figma: Sahifa o'rtasida: ISHONCH itilium logo (markazda, yuqorida) Card: "Tizimdan muvaffaqiyatli chiqildi!" "Qayta avtorizatsiyani oldini olish uchun..." ========================================================================== */ /* Body — to'liq oq sahifa, markazda content */ body.logout-page { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bg-page); font-family: var(--font-family-base); color: var(--text-primary); } /* Inner wrapper — markazlashtirilgan column */ .logout-page__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xl); padding: var(--space-2xl) var(--space-lg); width: 100%; max-width: 480px; } /* Logo — markazda, bossa /itilium/ ga olib o'tadi */ .logout-page__logo { display: inline-flex; align-items: center; text-decoration: none; height: 24px; transition: opacity var(--transition-fast); } .logout-page__logo:hover { opacity: 0.85; } .logout-page__logo svg { display: block; height: 24px; width: auto; } /* Card — markazda, soyali oq panel */ .logout-card { width: 100%; max-width: 400px; padding: var(--space-xl) var(--space-2xl); background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; } .logout-card__title { font-size: var(--font-md); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-sm); line-height: var(--leading-snug); } .logout-card__text { font-size: var(--font-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0; } /* Mobile */ @media (max-width: 480px) { .logout-page__inner { gap: var(--space-xl); padding: var(--space-lg); } .logout-page__logo, .logout-page__logo svg { height: 20px; } .logout-card { padding: var(--space-lg) var(--space-md); } .logout-card__title { font-size: var(--font-sm); } .logout-card__text { font-size: var(--font-xs); } } /* ============================================================================= 06/Pages — FAQ (faq.php) + Solutions (solutions.php) — 100% Figma match ----------------------------------------------------------------------------- Shadcn-style accordion bilan, smooth grid-template-rows animatsiya. ========================================================================== */ .faq-page, .solutions-page { padding: var(--space-xl) 0 var(--space-2xl); min-height: 60vh; } /* ============================================================================ 1) HEADER — back + title (chap) + search (o'ng) ============================================================================ */ .faq-page__header, .solutions-page__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); /* override global header */ background-color: transparent; height: auto; border: none; border-bottom: none; position: static; top: auto; z-index: auto; } .faq-page__title-row, .solutions-page__title-row { display: flex; align-items: center; gap: var(--space-sm); } /* Back arrow — User bergan 14x14 SVG (Lucide arrow-left, currentColor) */ .faq-page__back, .solutions-page__back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12.4167%206.58333H0.75M6.58333%200.75L0.75%206.58333L6.58333%2012.4167%22%20stroke%3D%22%231A1A1A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat; border: none; cursor: pointer; font-size: 0; text-decoration: none; border-radius: var(--radius-md); transition: background-color var(--transition-fast); } .faq-page__back:hover, .solutions-page__back:hover { background-color: var(--bg-muted); } .faq-page__title, .solutions-page__title { margin: 0; font-size: var(--font-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.01em; } /* Search — appeals page bilan bir xil pozitsiya */ .faq-page__search, .solutions-page__search { width: 280px; flex-shrink: 0; } .faq-page__search .input-item, .solutions-page__search .input-item { height: 36px; padding-left: 38px; } .faq-page__search::before, .solutions-page__search::before { left: 12px; width: 14px; height: 14px; } /* ============================================================================ 2) ACCORDION LIST ============================================================================ */ .faq-list { display: flex; flex-direction: column; gap: var(--space-sm); } .faq-section-title { margin: var(--space-md) 0 var(--space-xs); font-size: var(--font-md); font-weight: var(--font-semibold); color: var(--text-primary); } .faq-section-title:first-child { margin-top: 0; } /* ============================================================================ 3) ACCORDION ITEM — shadcn style ============================================================================ */ .faq-item { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); } .faq-item:hover { border-color: var(--border-strong); } .faq-item.is-open { border-color: var(--color-primary); } /* Question button */ .faq-item__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; padding: 16px 20px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-family-base); font-size: 14px; font-weight: var(--font-medium); color: var(--text-primary); transition: background-color var(--transition-fast); } .faq-item__question:hover { background-color: var(--bg-muted); } .faq-item__question-text { flex: 1 1 auto; min-width: 0; /* DEV-3773: flex item min-content'gacha qisilmasin */ overflow-wrap: break-word; } /* Chevron — smooth rotate on expand */ .faq-item__chevron { width: 16px; height: 16px; flex-shrink: 0; background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23737373%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.is-open .faq-item__chevron { transform: rotate(180deg); } /* ============================================================================ 3.1) ANSWER WRAPPER — shadcn-style smooth expand ============================================================================ */ .faq-item__answer-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.is-open .faq-item__answer-wrapper { grid-template-rows: 1fr; } .faq-item__answer-inner { overflow: hidden; min-height: 0; } .faq-item__answer-inner > * { margin-left: 20px; margin-right: 20px; } .faq-item__answer-inner > *:first-child { margin-top: 0; } .faq-item__answer-inner > *:last-child { margin-bottom: 20px; } /* Decision title */ .faq-item__decision-title { margin: 12px 0 8px; font-size: 13px; font-weight: var(--font-semibold); color: var(--text-primary); } /* Answer text */ .faq-item__answer-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; overflow-wrap: break-word; /* DEV-3773 */ } .faq-item__answer-text p { margin: 0 0 8px; } .faq-item__answer-text p:last-child { margin-bottom: 0; } .faq-item__answer-text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .faq-item__answer-text a { color: var(--color-info); text-decoration: underline; } /* Files list */ .faq-item__files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } /* ============================================================================ 4) EMPTY STATE — "На данный момент данных нет" ============================================================================ */ .faq-empty, .solutions-empty { display: flex; align-items: center; justify-content: center; padding: var(--space-3xl) var(--space-lg); text-align: center; } .faq-empty__text, .solutions-empty__text { margin: 0; font-size: var(--font-md); color: var(--text-tertiary); font-weight: var(--font-regular); /* ma'lumot yo'q ogohlantirishi — 400 */ line-height: 1.5; } /* ============================================================================ 5) BANNER (errors) ============================================================================ */ .faq-banner, .solutions-banner { margin-bottom: var(--space-md); padding: 10px 14px; background-color: var(--color-status-danger-bg); border: 1px solid var(--color-status-danger); border-radius: var(--radius-md); } /* ============================================================================ 6) PAGINATION ============================================================================ */ .faq-pagination, .solutions-pagination { margin-top: var(--space-lg); display: flex; justify-content: center; } /* ============================================================================ 7) SOLUTIONS — articles list (cards) ============================================================================ */ .solutions-page__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } @media (max-width: 1024px) { .solutions-page__list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .solutions-page__list { grid-template-columns: 1fr; } } /* ============================================================================ 8) SOLUTIONS — article detail view ============================================================================ */ .solutions-article { background-color: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-xl); } .solutions-article__text { font-size: 14px; line-height: 1.6; color: var(--text-primary); overflow-wrap: break-word; /* DEV-3773 */ } .solutions-article__text p { margin: 0 0 12px; } .solutions-article__text p:last-child { margin-bottom: 0; } .solutions-article__text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; } .solutions-article__text a { color: var(--color-info); text-decoration: underline; } .solutions-article__meta { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-md); } .solutions-article__section-title { margin: 0 0 8px; font-size: 13px; font-weight: var(--font-semibold); color: var(--text-tertiary); } .solutions-article__links { display: flex; flex-direction: column; gap: 4px; } .solutions-article__link { display: block; padding: 8px 12px; background: var(--color-info-bg); color: var(--color-info-text); font-size: 13px; font-weight: var(--font-medium); border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--transition-fast); } .solutions-article__link:hover { background-color: #BFDBFE; } .solutions-article__files { display: flex; flex-wrap: wrap; gap: 6px; } /* ============================================================================ 8) MOBILE ============================================================================ */ @media (max-width: 768px) { .faq-page__header, .solutions-page__header { flex-direction: column; align-items: stretch; } .faq-page__title-row, .solutions-page__title-row { width: 100%; } .faq-page__search, .solutions-page__search { width: 100%; } .faq-page__title, .solutions-page__title { font-size: var(--font-xl); } .faq-item__question { padding: 12px 16px; font-size: 13px; } .faq-item__answer-inner > * { margin-left: 16px; margin-right: 16px; } } /* ============================================================================= 99 — UTILITIES ----------------------------------------------------------------------------- Yordamchi klasslar (helpers). ========================================================================== */ /* ============================================================================ DISPLAY ============================================================================ */ .d-none { display: none !important; } .d-block { display: block !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } /* ============================================================================ FLEX ============================================================================ */ .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-1 { flex: 1 !important; } .flex-auto { flex: 0 0 auto !important; } .jc-start { justify-content: flex-start !important; } .jc-center { justify-content: center !important; } .jc-end { justify-content: flex-end !important; } .jc-between { justify-content: space-between !important; } .jc-around { justify-content: space-around !important; } .ai-start { align-items: flex-start !important; } .ai-center { align-items: center !important; } .ai-end { align-items: flex-end !important; } .ai-stretch { align-items: stretch !important; } .gap-xs { gap: var(--space-xs) !important; } .gap-sm { gap: var(--space-sm) !important; } .gap-md { gap: var(--space-md) !important; } .gap-lg { gap: var(--space-lg) !important; } .gap-xl { gap: var(--space-xl) !important; } /* ============================================================================ SPACING — margin ============================================================================ */ .m-0 { margin: 0 !important; } .m-xs { margin: var(--space-xs) !important; } .m-sm { margin: var(--space-sm) !important; } .m-md { margin: var(--space-md) !important; } .m-lg { margin: var(--space-lg) !important; } .m-xl { margin: var(--space-xl) !important; } .m-auto { margin: auto !important; } .mt-0 { margin-top: 0 !important; } .mt-xs { margin-top: var(--space-xs) !important; } .mt-sm { margin-top: var(--space-sm) !important; } .mt-md { margin-top: var(--space-md) !important; } .mt-lg { margin-top: var(--space-lg) !important; } .mt-xl { margin-top: var(--space-xl) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-xs { margin-bottom: var(--space-xs) !important; } .mb-sm { margin-bottom: var(--space-sm) !important; } .mb-md { margin-bottom: var(--space-md) !important; } .mb-lg { margin-bottom: var(--space-lg) !important; } .mb-xl { margin-bottom: var(--space-xl) !important; } .ml-0 { margin-left: 0 !important; } .ml-auto { margin-left: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-auto { margin-right: auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } /* ============================================================================ SPACING — padding ============================================================================ */ .p-0 { padding: 0 !important; } .p-xs { padding: var(--space-xs) !important; } .p-sm { padding: var(--space-sm) !important; } .p-md { padding: var(--space-md) !important; } .p-lg { padding: var(--space-lg) !important; } .p-xl { padding: var(--space-xl) !important; } .pt-0 { padding-top: 0 !important; } .pt-sm { padding-top: var(--space-sm) !important; } .pt-md { padding-top: var(--space-md) !important; } .pt-lg { padding-top: var(--space-lg) !important; } .pb-0 { padding-bottom: 0 !important; } .pb-sm { padding-bottom: var(--space-sm) !important; } .pb-md { padding-bottom: var(--space-md) !important; } .pb-lg { padding-bottom: var(--space-lg) !important; } /* ============================================================================ WIDTH & HEIGHT ============================================================================ */ .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .min-h-100vh { min-height: 100vh !important; } /* ============================================================================ BORDER RADIUS ============================================================================ */ .rounded { border-radius: var(--radius-md) !important; } .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-xl { border-radius: var(--radius-xl) !important; } .rounded-full { border-radius: var(--radius-full) !important; } .rounded-none { border-radius: 0 !important; } /* ============================================================================ SHADOW ============================================================================ */ .shadow-none { box-shadow: none !important; } .shadow-xs { box-shadow: var(--shadow-xs) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* ============================================================================ BACKGROUNDS ============================================================================ */ .bg-page { background-color: var(--bg-page) !important; } .bg-surface { background-color: var(--bg-surface) !important; } .bg-muted { background-color: var(--bg-muted) !important; } .bg-primary { background-color: var(--color-primary) !important; } .bg-success { background-color: var(--color-success) !important; } .bg-warning { background-color: var(--color-warning) !important; } .bg-danger { background-color: var(--color-danger) !important; } .bg-transparent { background-color: transparent !important; } /* ============================================================================ POSITION ============================================================================ */ .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: sticky !important; } /* ============================================================================ OVERFLOW ============================================================================ */ .overflow-hidden { overflow: hidden !important; } .overflow-auto { overflow: auto !important; } .overflow-scroll { overflow: scroll !important; } .overflow-visible { overflow: visible !important; } /* ============================================================================ CURSOR ============================================================================ */ .cursor-pointer { cursor: pointer !important; } .cursor-default { cursor: default !important; } .cursor-not-allowed { cursor: not-allowed !important; } /* ============================================================================ USER SELECT ============================================================================ */ .user-select-none { user-select: none !important; } .user-select-all { user-select: all !important; } /* ============================================================================ OPACITY ============================================================================ */ .opacity-0 { opacity: 0 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-100 { opacity: 1 !important; } /* ============================================================================ ELLIPSIS / TRUNCATE ============================================================================ */ .text-truncate { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .text-line-clamp-1, .text-line-clamp-2, .text-line-clamp-3 { display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .text-line-clamp-1 { -webkit-line-clamp: 1 !important; } .text-line-clamp-2 { -webkit-line-clamp: 2 !important; } .text-line-clamp-3 { -webkit-line-clamp: 3 !important; } /* fixh — PHP'da bor (slider'da uchun) */ .fixh { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ CLEARFIX ============================================================================ */ .clearfix::after { content: ''; display: block; clear: both; } /* ============================================================================ ACCESSIBILITY ============================================================================ */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================================ ICON HELPERS (PHP'da ishlatiladigan) ============================================================================ */ .avatar, .avatar-user, .avatar-manager { display: inline-block; width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: contain; border-radius: var(--radius-full); background-color: var(--bg-muted); } .avatar { background-image: url('/itilium/themes/img/icons/avatar.svg'); } .avatar-user { background-image: url('/itilium/themes/img/icons/avatar-user.svg'); } .avatar-manager { background-image: url('/itilium/themes/img/icons/avatar-manager.svg'); } /* Status icons */ .status-flame { display: inline-block; width: 20px; height: 20px; background: url('/itilium/themes/img/icons/flame.svg') center/contain no-repeat; vertical-align: middle; } .status-flame__gray { background-image: url('/itilium/themes/img/icons/flame-gray.svg'); } .status-pin { display: inline-block; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; vertical-align: middle; } /* Star icons */ .star-list { display: inline-flex; align-items: center; gap: var(--space-0-5); } .star-list .star, .star-list span { width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('/itilium/themes/img/icons/star-.svg'); } .star-list .star.active, .star-list .active { background-image: url('/itilium/themes/img/icons/star.svg'); }