/* ============================================================ TriCMS Admin Panel — CSS Variables & Theme System По умолчанию: светлая тема Переключение: data-theme="dark" на ============================================================ */ /* ----- Светлая тема (по умолчанию) ----- */ :root { /* Основные цвета бренда */ --primary: #5D87FF; --primary-hover: #4570EA; --primary-light: #ECF2FF; --secondary: #49BEFF; --secondary-light: #E8F7FF; /* Акцентные цвета */ --success: #13DEB9; --success-light: #E6FFFA; --warning: #FFAE1F; --warning-light: #FEF5E5; --danger: #FA896B; --danger-light: #FBF2EF; --info: #539BFF; --info-light: #EBF3FE; /* Фоны */ --bg-body: #F5F7FA; --bg-surface: #FFFFFF; --bg-sidebar: #FFFFFF; --bg-header: #FFFFFF; --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #F0F5FF; --bg-active: #ECF2FF; --bg-code: #F4F6F8; --bg-muted: #F0F4F8; --bg-modal: rgba(0, 0, 0, 0.4); /* Тексты */ --text-primary: #2A3547; --text-secondary: #5A6A85; --text-muted: #8B9BB5; --text-inverse: #FFFFFF; --text-link: #5D87FF; --text-heading: #2A3547; /* Бордеры */ --border-color: #E5ECF0; --border-light: #F0F4F8; --border-input: #DFE5EF; --border-focus: #5D87FF; /* Тени */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.05); /* Размеры */ --sidebar-width: 270px; --sidebar-collapsed: 80px; --header-height: 64px; --border-radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --radius-full: 50px; /* Шрифт */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; /* Переходы */ --transition: 0.2s ease; --transition-slow: 0.3s ease; } /* ----- Тёмная тема ----- */ [data-theme="dark"] { --bg-body: #171C23; --bg-surface: #202731; --bg-sidebar: #202731; --bg-header: #202731; --bg-card: #202731; --bg-input: #171C23; --bg-hover: #283040; --bg-active: #283040; --bg-code: #171C23; --bg-muted: #283040; --bg-modal: rgba(0, 0, 0, 0.6); --text-primary: #E4E8EF; --text-secondary: #A3AED0; --text-muted: #7C8DB5; --text-heading: #F0F4F8; --text-link: #7DA2FF; --border-color: #2E3744; --border-light: #283040; --border-input: #2E3744; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2); --shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.15); --primary-light: rgba(93, 135, 255, 0.15); --success-light: rgba(19, 222, 185, 0.15); --warning-light: rgba(255, 174, 31, 0.15); --danger-light: rgba(250, 137, 107, 0.15); --info-light: rgba(83, 155, 255, 0.15); --secondary-light: rgba(73, 190, 255, 0.15); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-body); line-height: 1.5; min-height: 100vh; overflow-x: hidden; } a { color: var(--text-link); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-hover); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 600; line-height: 1.3; } img { max-width: 100%; height: auto; } /* ============================================================ LAYOUT — Sidebar + Header + Content ============================================================ */ .admin-layout { display: flex; min-height: 100vh; max-width: 100vw; overflow-x: hidden; } /* ----- SIDEBAR ----- */ .sidebar { width: var(--sidebar-width); height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); box-shadow: var(--shadow-sidebar); display: flex; flex-direction: column; transition: width var(--transition-slow); overflow: hidden; } .sidebar-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .sidebar-collapse-toggle { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--bg-hover); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition), transform var(--transition-slow); font-size: 14px; } .sidebar-collapse-toggle:hover { background: var(--primary-light); color: var(--primary); } .sidebar-logo { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--font-size-lg); font-weight: 700; color: var(--text-heading); white-space: nowrap; flex: 1; } .sidebar-logo .logo-icon { width: 36px; height: 36px; background: var(--primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: var(--font-size-md); flex-shrink: 0; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; } .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } .nav-section { padding: 8px 20px 4px; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap; } .nav-group { margin-bottom: 2px; } .nav-section-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 24px); margin: 4px 12px 2px; padding: 8px 8px 8px 8px; border: none; border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: color var(--transition), background var(--transition); text-align: left; } .nav-section-toggle:hover { color: var(--text-secondary); background: var(--bg-hover); } .nav-section-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-section-chevron { flex-shrink: 0; font-size: 10px; opacity: 0.7; transition: transform var(--transition); } .nav-group--expanded .nav-section-chevron { transform: rotate(180deg); } .nav-group-items { display: none; } .nav-group--expanded .nav-group-items { display: block; } .nav-group--static .nav-group-items { display: block; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--text-secondary); font-size: var(--font-size-base); font-weight: 500; border-radius: 0; margin: 1px 12px; border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; cursor: pointer; } .nav-item:hover { background: var(--bg-hover); color: var(--primary); } .nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; } .nav-item .nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .nav-item-text { min-width: 0; } .nav-item .nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; } /* ----- MAIN AREA ----- */ .main-area { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; min-width: 0; max-width: 100%; overflow-x: hidden; transition: margin-left var(--transition-slow); } /* ----- DESKTOP: свернуть сайдбар (только иконки) ----- */ @media (min-width: 1025px) { .sidebar-collapse-toggle { display: flex; } .admin-layout.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); } .admin-layout.sidebar-collapsed .main-area { margin-left: var(--sidebar-collapsed); } .admin-layout.sidebar-collapsed .nav-section { display: none; } .admin-layout.sidebar-collapsed .nav-section-toggle { display: none; } .admin-layout.sidebar-collapsed .nav-group--static .nav-section { display: none; } .admin-layout.sidebar-collapsed .nav-group-items { display: block; } .admin-layout.sidebar-collapsed .nav-item { justify-content: center; padding: 10px 6px; margin-left: 8px; margin-right: 8px; } .admin-layout.sidebar-collapsed .nav-item .nav-item-text { display: none; } .admin-layout.sidebar-collapsed .sidebar-logo-text { display: none; } .admin-layout.sidebar-collapsed .sidebar-logo { flex: 0 0 auto; justify-content: center; max-width: 100%; } .admin-layout.sidebar-collapsed .sidebar-logo-img { max-height: 28px !important; max-width: 44px; object-fit: contain; } .admin-layout.sidebar-collapsed .sidebar-header { flex-direction: column; height: auto; min-height: var(--header-height); padding: 10px 8px 12px; gap: 8px; } .admin-layout.sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); } } /* ----- HEADER ----- */ .header { height: var(--header-height); background: var(--bg-header); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); } .header-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex-shrink: 1; } .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .btn-sidebar-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: var(--bg-hover); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); font-size: 18px; } .btn-sidebar-toggle:hover { background: var(--primary-light); color: var(--primary); } /* Header Quick Actions */ .header-actions { display: flex; align-items: center; gap: 8px; } .header-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 500; font-family: var(--font-family); text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), box-shadow var(--transition); color: var(--text-body); background: var(--bg-hover); border: 1px solid var(--border-color); } .header-action-btn:hover { background: var(--bg-input); color: var(--primary); border-color: var(--primary); } .header-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); } .header-action-btn.primary:hover { background: var(--primary-hover); box-shadow: 0 2px 8px rgba(var(--primary-rgb, 78, 115, 248), 0.3); } .header-action-btn i { font-size: 12px; } /* Header Buttons */ .header-icon-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: var(--bg-hover); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); font-size: 14px; position: relative; box-sizing: border-box; } a.header-icon-btn { text-decoration: none; color: inherit; } a.header-icon-btn:hover { color: var(--primary); } .header-icon-btn:hover { background: var(--primary-light); color: var(--primary); } .header-icon-btn .badge-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--warning, #ea580c); border-radius: 50%; border: 2px solid var(--bg-header); } /* Language Dropdown */ .lang-dropdown { position: relative; } .lang-toggle { font-size: 11px !important; font-weight: 600; letter-spacing: 0.5px; } .lang-code { font-size: 11px; font-weight: 600; } .lang-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; padding: 4px; opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s; } .lang-dropdown-menu.show { display: block; opacity: 1; transform: translateY(0); } .lang-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; background: none; color: var(--text-primary); font-size: var(--font-size-sm); font-family: inherit; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); text-align: left; } .lang-dropdown-item:hover { background: var(--primary-light); color: var(--primary); } .lang-code-sm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; font-size: 11px; font-weight: 700; background: var(--bg-hover); border-radius: 4px; color: var(--text-secondary); letter-spacing: 0.5px; } /* Уведомления в шапке: заказы + комментарии */ .admin-notif-dropdown { position: relative; } .admin-notif-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 280px; max-width: min(320px, calc(100vw - 24px)); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200; padding: 0; opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s; } .admin-notif-menu.show { display: block; opacity: 1; transform: translateY(0); } .admin-notif-menu__head { padding: 10px 14px 8px; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); } .admin-notif-menu__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-primary); font-size: var(--font-size-sm); text-decoration: none; transition: background var(--transition); border-bottom: 1px solid var(--border-color); } .admin-notif-menu__row:last-of-type { border-bottom: none; } .admin-notif-menu__row:hover { background: var(--primary-light); color: var(--primary); } .admin-notif-menu__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); border-radius: var(--radius-sm); color: var(--text-secondary); flex-shrink: 0; font-size: 15px; } .admin-notif-menu__row:hover .admin-notif-menu__icon { background: rgba(255, 255, 255, 0.6); color: var(--primary); } .admin-notif-menu__label { flex: 1; min-width: 0; font-weight: 500; } .admin-notif-menu__count { font-size: 13px; font-weight: 700; min-width: 1.5em; text-align: right; color: var(--text-muted); } .admin-notif-menu__count.has-value { color: var(--primary); } .admin-notif-menu__empty { padding: 10px 14px 12px; font-size: var(--font-size-xs); color: var(--text-muted); line-height: 1.45; } /* User Menu */ .user-menu { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition); } .user-menu:hover { background: var(--bg-hover); } img.user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } div.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--font-size-sm); } .user-info { display: flex; flex-direction: column; line-height: 1.3; } .user-name { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-heading); } .user-role { font-size: var(--font-size-xs); color: var(--text-muted); } .user-menu-arrow { font-size: 10px; color: var(--text-muted); transition: transform var(--transition); margin-left: 2px; } .user-menu-wrapper.open .user-menu-arrow { transform: rotate(180deg); } /* User Dropdown */ .user-menu-wrapper { position: relative; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s; z-index: 1000; } .user-menu-wrapper.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .user-dropdown-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .user-dropdown-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-base); flex-shrink: 0; } .user-dropdown-name { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-heading); line-height: 1.3; } .user-dropdown-login { font-size: var(--font-size-xs); color: var(--text-muted); } .user-dropdown-divider { height: 1px; background: var(--border-color); margin: 0; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--font-size-sm); color: var(--text-body); text-decoration: none; transition: background var(--transition), color var(--transition); cursor: pointer; width: 100%; border: none; background: none; text-align: left; font-family: inherit; } .user-dropdown-item:hover { background: var(--bg-hover); color: var(--primary); } .user-dropdown-item i { width: 18px; text-align: center; font-size: 13px; color: var(--text-muted); transition: color var(--transition); } .user-dropdown-item:hover i { color: var(--primary); } .user-dropdown-logout { color: var(--danger); } .user-dropdown-logout:hover { background: rgba(var(--danger-rgb, 220, 53, 69), 0.08); color: var(--danger); } .user-dropdown-logout i { color: var(--danger); } /* ----- CONTENT AREA ----- */ .content { flex: 1; padding: 24px; min-width: 0; max-width: 100%; } .content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .content-header h1 { font-size: var(--font-size-2xl); font-weight: 700; } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--text-muted); } .breadcrumbs a { color: var(--text-secondary); } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs .sep { color: var(--text-muted); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border-light); transition: box-shadow var(--transition); overflow: visible; min-width: 0; max-width: 100%; } .card-header { padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-heading); } .card-subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; } .card-body { padding: 20px 24px; overflow: visible; min-width: 0; } .card-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); } /* Stat Cards (компактніше — 7+ карток краще вміщаються в ряд) */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 12px 12px; box-shadow: var(--shadow-card); border: 1px solid var(--border-light); display: flex; align-items: center; gap: 10px; } .stat-card-link { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .stat-card-link:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .stat-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .stat-icon.primary { background: var(--primary-light); color: var(--primary); } .stat-icon.success { background: var(--success-light); color: var(--success); } .stat-icon.warning { background: var(--warning-light); color: var(--warning); } .stat-icon.danger { background: var(--danger-light); color: var(--danger); } .stat-icon.info { background: var(--info-light); color: var(--info); } .stat-icon.secondary { background: var(--secondary-light); color: var(--secondary); } .stat-info { min-width: 0; } .stat-info .stat-value { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); line-height: 1.2; word-break: break-word; } .stat-info .stat-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.25; } .stat-card-link { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .stat-card-link:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .stat-card-link .stat-icon.secondary { background: rgba(139, 92, 246, 0.12); color: #7c3aed; } .stat-card-link:hover .stat-icon.secondary { background: rgba(139, 92, 246, 0.2); color: #6d28d9; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px; font-size: var(--font-size-sm); font-weight: 600; font-family: var(--font-family); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); white-space: nowrap; line-height: 1.5; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { opacity: 0.9; } .btn-danger { background: var(--danger); color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-outline { background: transparent; border: 1px solid var(--border-input); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-hover); color: var(--primary); } .btn-sm { padding: 5px 14px; font-size: var(--font-size-xs); } .btn-lg { padding: 12px 28px; font-size: var(--font-size-md); } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); } /* ============================================================ FORMS ============================================================ */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-heading); margin-bottom: 6px; } .form-control { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font-size: var(--font-size-base); font-family: var(--font-family); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control:focus { outline: none; } .form-control::placeholder { color: var(--text-muted); } textarea.form-control { height: auto; min-height: 100px; padding: 10px 14px; resize: vertical; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6A85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; } /* Випадаючий пошук категорії (SEO «Додати SEO для категорії», YML батьківська категорія) */ .tri-cat-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; margin: 0; padding: 0; list-style: none; background: var(--bg-primary, #fff); border: 1px solid var(--border-color, #ddd); border-top: none; border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px); max-height: 250px; overflow-y: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .tri-cat-search-dropdown[hidden] { display: none !important; } .tri-cat-search-item { padding: 8px 14px; cursor: pointer; font-size: 13px; line-height: 1.35; border-bottom: 1px solid var(--border-color); word-break: break-word; } .tri-cat-search-item:last-child { border-bottom: none; } .tri-cat-search-item:hover { background: var(--bg-secondary); } .tri-cat-search-empty { padding: 10px 14px; color: var(--text-muted); font-size: 13px; } .tri-cat-search-selected { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px 8px 14px; max-width: 100%; box-sizing: border-box; background: rgba(var(--primary-rgb, 59, 130, 246), 0.09); border: 1px solid rgba(var(--primary-rgb, 59, 130, 246), 0.24); border-radius: 999px; font-size: 13px; line-height: 1.35; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .tri-cat-search-selected { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.38); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .tri-cat-search-selected-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary); word-break: break-word; } .tri-cat-search-selected[hidden] { display: none !important; } .tri-cat-search-clear { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.06); border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; border-radius: 50%; transition: background 0.15s ease, color 0.15s ease; } [data-theme="dark"] .tri-cat-search-clear { background: rgba(255, 255, 255, 0.1); color: #a1a1aa; } .tri-cat-search-clear:hover { color: #b91c1c; background: rgba(239, 68, 68, 0.14); } [data-theme="dark"] .tri-cat-search-clear:hover { color: #fca5a5; background: rgba(239, 68, 68, 0.22); } .tri-cat-search-clear:focus { outline: none; } .tri-cat-search-clear:focus-visible { box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.45); } .form-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px; } /* Подсказки под чекбоксами — нейтральный серый, не синий */ .form-text.text-muted.form-hint-neutral { color: #6b7280; font-size: var(--font-size-xs); } [data-theme="dark"] .form-text.text-muted.form-hint-neutral { color: #9ca3af; } .form-section-title { font-size: 15px; font-weight: 600; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); } .form-section-title:first-child { margin-top: 0; } .parser-template-tags { display: flex; gap: 8px; margin-bottom: 6px; } .parser-tag { display: inline-block; padding: 4px 10px; font-size: 12px; font-family: var(--font-mono, monospace); background: var(--bg-muted, #f0f0f0); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; } .parser-tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .hint-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light, rgba(3, 158, 247, .1)); border-radius: 50%; cursor: help; margin-left: 4px; vertical-align: middle; } .toggle-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; } .toggle-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); } .form-error { font-size: var(--font-size-xs); color: var(--danger); margin-top: 4px; } .form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; } /* ============================================================ MOBILE SCROLL WRAPPER ============================================================ */ .mobile-scroll-wrapper { max-width: 100%; } /* Posts filter form (inside card-header) */ .posts-filter-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .posts-filter-form .form-control-sm { width: auto; height: 34px; font-size: 13px; padding: 4px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--bg-input); } .posts-filter-form select.form-control-sm { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235A6A85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; } .posts-filter-search { display: flex; align-items: center; gap: 6px; } .posts-filter-search .form-control-sm { width: 180px; } .posts-filter-search .btn-sm { height: 34px; padding: 0 10px; } /* ============================================================ TABLE ============================================================ */ /* Bulk actions bar */ /* ── Bulk actions bar ── */ .bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 14px; background: var(--primary-light); border: 1px solid rgba(93, 135, 255, .25); border-radius: var(--border-radius); font-size: 13px; animation: bulkSlideIn .25s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 2px 8px rgba(93, 135, 255, .1); } @keyframes bulkSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .bulk-bar-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primary); white-space: nowrap; font-size: 13px; } .bulk-bar-count::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; flex-shrink: 0; animation: bulkDot 1.5s ease-in-out infinite; } @keyframes bulkDot { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } } .bulk-bar select { max-width: 220px; padding: 6px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: border-color .15s; } .bulk-bar select:focus { border-color: var(--primary); outline: none; } /* ── Custom checkboxes ── */ .bulk-check, .bulk-check-all { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid var(--border-input); border-radius: 4px; background: var(--bg-card); cursor: pointer; position: relative; transition: all .15s ease; flex-shrink: 0; margin: 0; } .bulk-check:hover, .bulk-check-all:hover { border-color: var(--primary); } .bulk-check:checked, .bulk-check-all:checked { background: var(--primary); border-color: var(--primary); } .bulk-check:checked::after, .bulk-check-all:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .bulk-check-all:indeterminate { background: var(--primary); border-color: var(--primary); } .bulk-check-all:indeterminate::after { content: ''; position: absolute; top: 6px; left: 3px; width: 8px; height: 2px; background: #fff; border-radius: 1px; } /* Row highlight when checked */ .table tbody tr.bulk-selected { background: var(--primary-light); } .table tbody tr.bulk-selected:hover { background: rgba(93, 135, 255, .12); } .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color); white-space: nowrap; } .table td { padding: 14px 16px; color: var(--text-primary); border-bottom: 1px solid var(--border-light); vertical-align: middle; } .table tbody tr { transition: background var(--transition); } .table tbody tr:hover { background: var(--bg-hover); } /* Status badges */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--radius-full); white-space: nowrap; } .badge-success { background: var(--success-light); color: var(--success); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-secondary { background: var(--gray-100, #f0f0f0); color: var(--gray-500, #6b7280); } .badge-info { background: var(--info-light); color: var(--info); } .badge-primary { background: var(--primary-light); color: var(--primary); } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; gap: 4px; list-style: none; } .pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); transition: all var(--transition); } .pagination a:hover { background: var(--bg-hover); color: var(--primary); } .pagination .active span { background: var(--primary); color: #fff; } /* ============================================================ ALERTS ============================================================ */ .alert { padding: 14px 20px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .alert-success { background: var(--success-light); color: var(--success); border-left: 4px solid var(--success); } .alert-danger { background: var(--danger-light); color: var(--danger); border-left: 4px solid var(--danger); } .alert-warning { background: var(--warning-light); color: var(--warning); border-left: 4px solid var(--warning); } .alert-info { background: var(--info-light); color: var(--info); border-left: 4px solid var(--info); } /* ============================================================ TABS (Language tabs etc.) ============================================================ */ .tabs, .tab-nav { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; } .tab-btn { padding: 10px 20px; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 6px; font-family: inherit; } .tab-btn:hover { color: var(--primary); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .tab-panel { display: none; } .tab-panel.active { display: block; } #parser-channel-form .tab-panel { padding-top: 16px; } #parser-channel-form .tab-panel.active { display: block; } #parser-channel-form .tab-panel .card { margin-bottom: 0; } /* Switch (свайп) для парсера */ .switch-label { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; user-select: none; margin-bottom: 0.5rem; } .switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .switch-slider { position: relative; display: inline-block; width: 44px; height: 24px; background: var(--border-color); border-radius: 24px; transition: background .2s; flex-shrink: 0; } .switch-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; } .switch-input:checked+.switch-slider { background: var(--primary); } .switch-input:checked+.switch-slider::after { transform: translateX(20px); } .switch-input:focus-visible+.switch-slider { outline: 2px solid var(--primary); outline-offset: 2px; } .form-row--switch { align-items: center; } /* Language tabs bar */ .lang-tabs-bar { display: flex; gap: 5px; align-items: center; } .lang-tab-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 2px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all .15s; outline: none; } .lang-tab-btn:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--primary); } .lang-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .lang-tab-btn.active img { filter: brightness(1.1); } .lang-tab-btn img, .lang-tabs-bar .tab-btn img { flex-shrink: 0; } /* Language content panels (NOT .tab-panel — separate system) */ .lang-panel { display: none; } .lang-panel.active { display: block; } /* Tree indent for categories */ .tree-indent { display: inline-block; width: 24px; } .tree-dash { color: var(--text-muted); margin-right: 4px; } /* Action buttons group */ .actions { display: flex; align-items: center; gap: 6px; } .btn-icon-sm { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); font-size: 13px; } .btn-icon-sm:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary); } .btn-icon-sm.danger:hover { color: var(--danger); border-color: var(--danger); } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 40px; height: 22px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border-color); border-radius: 22px; cursor: pointer; transition: background var(--transition); } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); } .toggle input:checked+.toggle-slider { background: var(--primary); } .toggle input:checked+.toggle-slider::before { transform: translateX(18px); } /* Form row (horizontal label + input) */ .form-row { display: flex; gap: 16px; align-items: flex-start; } .form-row>.form-group { flex: 1; min-width: 0; } .form-actions { display: flex; gap: 12px; align-items: center; padding-top: 10px; } @media (max-width: 768px) { .form-row { flex-direction: column; } .checkbox-grid-2col { grid-template-columns: 1fr !important; } } /* ============================================================ FOOTER ============================================================ */ .admin-footer { padding: 16px 24px; text-align: center; font-size: var(--font-size-xs); color: var(--text-muted); border-top: 1px solid var(--border-color); } /* ============================================================ LOGIN PAGE ============================================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-body); padding: 20px; } .login-card { width: 100%; max-width: 420px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px; border: 1px solid var(--border-light); } .login-logo { text-align: center; margin-bottom: 32px; } .login-logo .logo-icon { width: 52px; height: 52px; margin: 0 auto 12px; background: var(--primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; } .login-logo h2 { font-size: var(--font-size-xl); margin-bottom: 4px; } .login-logo p { color: var(--text-muted); font-size: var(--font-size-sm); } .login-form .btn { width: 100%; height: 44px; font-size: var(--font-size-base); margin-top: 8px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .btn-sidebar-toggle { display: flex; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-area { margin-left: 0; } } @media (max-width: 768px) { .content { padding: 16px; } .stat-cards { grid-template-columns: 1fr; } /* Mobile scroll wrapper: horizontal scroll for entire list block */ .mobile-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mobile-scroll-wrapper>.card { min-width: 700px; } .card-body { padding: 16px 12px; } /* Header mobile: reduce padding & gaps so everything fits */ .header { padding: 0 10px; } .header-left { gap: 8px; } .header-right { gap: 6px; flex-shrink: 0; } .header-action-btn span { display: none; } .header-action-btn { padding: 6px 8px; font-size: 12px; } .header-icon-btn { width: 32px; height: 32px; font-size: 13px; } .user-menu .user-avatar, .user-menu img.user-avatar, .user-menu div.user-avatar { width: 32px; height: 32px; font-size: 13px; } .user-info { display: none; } .user-menu-arrow { display: none; } .content-header { gap: 10px; margin-bottom: 16px; } .content-header h1 { font-size: 18px; } .content-header .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; } } @media (max-width: 420px) { .header { padding: 0 6px; } .header-left { gap: 4px; } .header-right { gap: 4px; } .header-icon-btn { width: 28px; height: 28px; font-size: 12px; } .header-action-btn { padding: 5px 7px; font-size: 11px; } .user-menu .user-avatar, .user-menu img.user-avatar, .user-menu div.user-avatar { width: 28px; height: 28px; font-size: 11px; } .lang-code { font-size: 11px; } .content-header h1 { font-size: 16px; } .content-header .breadcrumbs { display: none; } .content-header .btn { padding: 5px 10px; font-size: 11px; } } /* Overlay for mobile sidebar */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 99; } .sidebar-overlay.show { display: block; } /* ========== Extra Fields in Post Form (DLE-style) ========== */ .ef-post-section { margin-top: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); overflow: visible; } .ef-post-header { background: var(--bg-muted, #f8fafc); padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; gap: 8px; } .ef-post-header i { color: var(--primary, #6366f1); font-size: 14px; } .ef-tabs-bar { display: flex; gap: 0; background: var(--bg-muted, #f8fafc); border-bottom: 1px solid var(--border-color); } .ef-group-tab { padding: 9px 20px; font-size: 12px; font-weight: 500; border: none; background: none; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .2s; } .ef-group-tab:hover { color: var(--text-primary); } .ef-group-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--bg-card, #fff); } .ef-post-fields { /* No gap — borders handle spacing */ } .ef-field-row { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); min-height: 50px; } .ef-field-row:last-child { border-bottom: none; } .ef-field-label { flex: 0 0 200px; padding: 12px 18px; font-size: 13px; font-weight: 500; color: var(--text-primary); background: var(--bg-muted, #f8fafc); align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--border-color); } .ef-req { color: var(--danger, #dc2626); margin-left: 3px; } .ef-field-input { flex: 1; padding: 10px 18px; } .ef-field-input .form-control { border: none; background: transparent; padding: 4px 0; box-shadow: none; border-bottom: 1px solid var(--border-color); border-radius: 0; font-size: 13px; } .ef-field-input .form-control:focus { border-bottom-color: var(--primary); outline: none; box-shadow: none; } .ef-field-input select.form-control { border: 1px solid var(--border-input); border-radius: var(--radius-sm, 6px); padding: 6px 10px; background: var(--bg-input, #fff); } .ef-field-input .btn { flex-shrink: 0; } .ef-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; } .ef-field-counter { font-size: 11px; color: var(--text-muted); margin-top: 2px; text-align: right; } /* ============================================================ PHONE FIELD — Extra Fields ============================================================ */ .ef-phone-wrap { display: flex; gap: 0; align-items: stretch; max-width: 400px; position: relative; } .ef-phone-country { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border-input); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--bg-surface); cursor: pointer; user-select: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s; } .ef-phone-country:hover { background: var(--bg-hover); } .ef-phone-flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; } .ef-phone-code { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 36px; } .ef-phone-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; flex: 1; font-size: 14px; letter-spacing: 0.5px; } .ef-phone-dropdown { position: absolute; top: 100%; left: 0; z-index: 60; width: 320px; max-height: 300px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); margin-top: 4px; display: flex; flex-direction: column; } .ef-phone-search { border: none; border-bottom: 1px solid var(--border-color); padding: 10px 12px; font-size: 13px; outline: none; background: transparent; color: var(--text-primary); font-family: inherit; } .ef-phone-search::placeholder { color: var(--text-muted); } .ef-phone-list { overflow-y: auto; flex: 1; max-height: 250px; } .ef-phone-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; transition: background 0.1s; } .ef-phone-option:hover { background: var(--bg-hover); } .ef-phone-option.active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.08); } .ef-phone-opt-name { flex: 1; color: var(--text-primary); } .ef-phone-opt-code { color: var(--text-muted); font-weight: 600; font-size: 12px; } /* ============================================================ LOCATION FIELD — Extra Fields ============================================================ */ .ef-location-wrap { display: flex; gap: 8px; max-width: 500px; } .ef-location-wrap .form-control { flex: 1; } .ef-loc-country, .ef-loc-city { min-width: 0; } /* Schedule (work hours) */ .ef-schedule-wrap { max-width: 100%; overflow-x: auto; } .ef-schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ef-schedule-table th, .ef-schedule-table td { padding: 8px 10px; border: 1px solid var(--border-color); vertical-align: middle; } .ef-schedule-table th { background: var(--bg-surface); font-weight: 600; color: var(--text-secondary); text-align: left; } .ef-schedule-day { width: 56px; font-weight: 600; white-space: nowrap; } .ef-schedule-table .form-control[type="time"] { min-width: 120px; max-width: 160px; padding: 6px 10px; } .ef-schedule-table .form-control[type="time"]:disabled { background: var(--bg-muted, #f3f4f6); color: var(--text-muted); cursor: not-allowed; } .ef-schedule-off { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } /* URL field with nofollow */ .ef-url-wrap { display: flex; gap: 10px; align-items: center; } .ef-url-wrap .form-control { flex: 1; } .ef-url-nofollow { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; padding: 4px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); transition: border-color 0.2s, background 0.2s; } .ef-url-nofollow:hover { border-color: var(--primary); } .ef-url-nofollow input[type="checkbox"] { margin: 0; accent-color: var(--primary); } .ef-url-nofollow span { font-family: monospace; font-weight: 600; letter-spacing: 0.5px; } /* Upload controls */ .ef-upload-wrap { display: flex; gap: 8px; align-items: center; } .ef-upload-btn { white-space: nowrap; height: 38px; flex-shrink: 0; } .ef-upload-preview { margin-top: 8px; position: relative; display: inline-flex; align-items: flex-end; gap: 8px; } .ef-upload-preview img { height: 100px; max-width: 200px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--border-color); object-fit: cover; } .ef-preview-remove { padding: 5px 10px; border-radius: 6px; background: none; color: var(--danger, #dc2626); border: 2px solid var(--bg-card, #fff); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; border: 1px solid var(--danger, #dc2626); transition: all .15s; } .ef-preview-remove:hover { background: var(--danger, #dc2626); color: #fff; } /* Category cover ({category_circles}) — как OG, круглое превью */ .cat-cover-upload-wrap { flex-wrap: wrap; align-items: center; } .cat-cover-file-name { font-size: 13px; color: var(--text-muted); min-width: 0; flex: 1 1 140px; line-height: 1.35; } .cat-cover-upload-preview { margin-top: 10px; align-items: center; position: relative; } .cat-cover-upload-preview img { width: 96px; height: 96px; max-width: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: opacity 0.2s; } .cat-cover-upload-preview.is-pending-remove img { opacity: 0.35; } .cat-cover-remove-sync.ef-preview-remove.is-active { background: var(--danger, #dc2626); color: #fff; } .cat-cover-field input#category_cover_remove { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Gallery preview grid */ .ef-gallery-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .ef-gallery-thumb { position: relative; display: inline-block; } .ef-gallery-thumb img { height: 100px; max-width: 160px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--border-color); object-fit: cover; display: block; } .ef-gallery-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: opacity .15s, background .15s; } .ef-gallery-thumb:hover .ef-gallery-remove { opacity: 1; } .ef-gallery-remove:hover { background: var(--danger, #dc2626); } /* Repeater field */ .ef-repeater-table { width: 100%; border-collapse: collapse; } .ef-repeater-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 0 8px 6px 0; text-transform: uppercase; letter-spacing: .3px; } .ef-repeater-table td { padding: 0 8px 6px 0; } .ef-repeater-table td:last-child { padding-right: 0; } .ef-repeater-del { width: 32px; height: 32px; border-radius: 6px; background: none; border: 1px solid var(--danger, #dc2626); color: var(--danger, #dc2626); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all .15s; } .ef-repeater-del:hover { border-color: var(--danger, #dc2626); color: #fff; background: var(--danger, #dc2626); } .rep-num { width: 36px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); user-select: none; } /* Documents field (title + file rows) */ .ef-documents-admin { display: flex; flex-direction: column; gap: 8px; } .ef-documents-rows { display: flex; flex-direction: column; gap: 10px; } .ef-documents-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--bg-soft, #f8fafc); } .ef-documents-row__num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light, #e8f0fe); color: var(--primary, #5d87ff); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 4px; } .ef-documents-row__fields { flex: 1; min-width: 0; } .ef-documents-row .ef-upload-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ef-documents-row__status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted, #64748b); } .ef-documents-row__status.is-ready { color: #15803d; } .ef-documents-row__status[hidden] { display: none !important; } /* ============================================================ TOGGLE SWITCH (свайпы) ============================================================ */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border-color); border-radius: 24px; transition: all .25s ease; } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: all .25s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); } .toggle-switch input:checked+.toggle-slider { background: var(--primary); } .toggle-switch input:checked+.toggle-slider::before { transform: translateX(20px); } .toggle-switch input:focus+.toggle-slider { box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), .15); } /* Settings row — DLE-style */ .setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-color); } .setting-row:first-child { padding-top: 0; } .setting-row:last-child { border-bottom: none; padding-bottom: 0; } .setting-info { flex: 1; min-width: 0; } .setting-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .setting-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } .setting-control { flex-shrink: 0; display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 420px; } .setting-control--wide { min-width: 300px; max-width: 500px; } .setting-control .form-control { margin: 0; } .setting-unit { margin-left: 6px; font-size: .85rem; color: var(--text-muted, #6b7280); white-space: nowrap; } /* Setting row with full-width control (textarea etc.) */ .setting-row--stack { flex-direction: column; gap: 10px; } .setting-row--stack .setting-control, .setting-row--stack .setting-control--wide { min-width: 0; max-width: 100%; width: 100%; } /* Группа чекбоксов в настройках (логирование групп и т.п.) */ .setting-row--checkbox-group .setting-checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; min-width: 0; max-width: 380px; } .setting-row--checkbox-group .setting-checkbox-group .form-check { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-muted); transition: background var(--transition); } .setting-row--checkbox-group .setting-checkbox-group .form-check:hover { background: var(--bg-hover); } .setting-row--checkbox-group .setting-checkbox-group .form-check span { font-size: var(--font-size-sm); color: var(--text-primary); } @media (max-width: 768px) { .setting-row { flex-direction: column; gap: 10px; } .setting-control, .setting-control--wide { min-width: 0 !important; max-width: 100% !important; width: 100%; } .ef-field-row { flex-direction: column; align-items: stretch; } .ef-field-label { flex: none; border-right: none; border-bottom: 1px solid var(--border-color); padding: 8px 14px; } .ef-field-input { padding: 10px 14px; } .ef-upload-wrap { flex-direction: column; } } /* ============================================================ BACKUP MODULE ============================================================ */ .backup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 24px; } .backup-card .card-header { display: flex; align-items: flex-start; gap: 16px; } .backup-card-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); font-size: 1.35rem; } .backup-card-icon--save { background: var(--success-light); color: var(--success); } .backup-card-icon--restore { background: var(--danger-light); color: var(--danger); } .backup-card .card-body .setting-row { margin-bottom: 16px; } .backup-card .card-body .btn { margin-top: 4px; } .backup-footer { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 16px; background: var(--bg-muted); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-muted); } .backup-footer i { color: var(--text-secondary); } .backup-footer code { background: var(--bg-code); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 0.85em; } /* ============================== Per-Language Fields (Multilingual Settings) ============================== */ .lang-fields-group { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .lang-field-row { display: flex; align-items: flex-start; gap: 8px; } .lang-field-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; background: var(--bg-muted); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.5px; flex-shrink: 0; margin-top: 2px; } .lang-field-row .form-control { flex: 1; } .lang-field-row textarea.form-control { min-height: 36px; } /* ============================================================ TOGGLE SWITCH — Checkbox (Yes/No) Extra Fields ============================================================ */ .ef-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; user-select: none; } .ef-toggle input[type="checkbox"], .ef-toggle input[type="hidden"] { display: none; } .ef-toggle-track { position: relative; width: 44px; height: 24px; background: var(--border-color, #d1d5db); border-radius: 12px; transition: background 0.25s ease; flex-shrink: 0; } .ef-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s ease; } .ef-toggle input[type="checkbox"]:checked+.ef-toggle-track { background: var(--primary, #6366f1); } .ef-toggle input[type="checkbox"]:checked+.ef-toggle-track .ef-toggle-thumb { transform: translateX(20px); } .ef-toggle-label { font-size: 13px; color: var(--text-secondary); } /* ============================================================ CHIP-SELECTOR — Multi-select for Extra Fields ============================================================ */ .ef-chip-selector { position: relative; max-width: 500px; } .ef-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); min-height: 42px; background: var(--bg-input); cursor: text; align-items: center; transition: border-color 0.2s; overflow: visible; } .ef-chip-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 99, 102, 241), 0.15); } .ef-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; } .ef-chip-remove { cursor: pointer; font-size: 10px; opacity: 0.8; transition: opacity 0.15s; } .ef-chip-remove:hover { opacity: 1; } .ef-chip-input { border: none; outline: none; background: transparent; font-size: 13px; min-width: 120px; flex: 1; padding: 2px 0; color: var(--text-primary); font-family: inherit; } .ef-chip-input::placeholder { color: var(--text-muted); } .ef-chip-dropdown { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; width: max-content; max-width: 320px; z-index: 9999; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin-top: 4px; } .ef-chip-option { padding: 8px 14px; cursor: pointer; font-size: 13px; transition: background 0.1s; } .ef-chip-option:hover { background: var(--bg-hover); } .ef-chip-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px dashed var(--border-input); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .ef-chip-add:hover { border-color: var(--primary); color: var(--primary); } .ef-dd-item { padding: 8px 14px; cursor: pointer; font-size: 13px; transition: background 0.1s; } .ef-dd-item:hover { background: var(--bg-hover); } .ef-chip-x { cursor: pointer; opacity: 0.9; margin-left: 2px; } .ef-chip-x:hover { opacity: 1; } .ef-chip-dd-anchor { overflow: visible; } /* ============================================================ COLOR PICKER — Extra Fields ============================================================ */ .ef-color-picker { max-width: 380px; } .ef-color-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .ef-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; padding: 0; outline: none; } .ef-color-swatch:hover { transform: scale(1.15); border-color: var(--text-secondary); } .ef-color-swatch.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); transform: scale(1.1); } /* White swatch needs visible border */ .ef-color-swatch[data-color="#FFFFFF"] { border-color: #ddd; } .ef-color-controls { display: flex; align-items: center; gap: 8px; } .ef-color-preview { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-input); flex-shrink: 0; } .ef-color-native { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); cursor: pointer; background: none; flex-shrink: 0; } .ef-color-native::-webkit-color-swatch-wrapper { padding: 2px; } .ef-color-native::-webkit-color-swatch { border: none; border-radius: 3px; } .ef-color-hex { width: 100px !important; height: 36px; font-family: monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } .ef-color-clear { height: 36px; width: 36px; padding: 0; font-size: 18px; line-height: 1; flex-shrink: 0; } /* ============================================================ PARSER MODULE ============================================================ */ /* Modal overlay */ .parser-modal-overlay { display: none; position: fixed; inset: 0; background: var(--bg-modal); z-index: 9999; align-items: center; justify-content: center; } .parser-modal-overlay.is-open { display: flex; } .parser-modal { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); max-width: 560px; width: 92%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .parser-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-color); } .parser-modal__header h3 { margin: 0; font-size: var(--font-size-lg); font-weight: 700; color: var(--text-heading); } .parser-modal__close { background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; padding: 0; line-height: 1; } .parser-modal__close:hover { color: var(--danger); } .parser-modal__body { padding: 20px 24px; overflow-y: auto; flex: 1; font-size: var(--font-size-sm); line-height: 1.6; } .parser-modal__footer { padding: 16px 24px; border-top: 1px solid var(--border-color); text-align: right; } /* XF / Replacement rows — align button with inputs */ .xf-row, .rep-row { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .xf-row .form-group, .rep-row .form-group { flex: 1; margin-bottom: 0; } .xf-row .btn, .rep-row .btn { flex-shrink: 0; align-self: center; } .xf-row { align-items: flex-end; } .xf-field-cell { flex: 0 0 180px; } .xf-selector-cell { flex: 1; min-width: 140px; } .xf-template-cell { flex: 1.5; min-width: 180px; } .xf-remove-cell { flex: 0 0 auto; } .form-label--sm { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } /* Utility: text truncate */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Test results */ .parser-test-result { display: none; margin-top: 16px; } .parser-test-result.is-visible { display: block; } .parser-test-result .card { border: 1px dashed var(--border-color); } .parser-test-result__body { max-height: 400px; overflow: auto; font-size: var(--font-size-sm); line-height: 1.6; } /* Parser run log */ .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .parser-run-entries { max-height: 300px; overflow: auto; font-size: var(--font-size-xs); line-height: 1.5; } .parser-run-entries div { margin: 3px 0; } .btn-block { display: flex; width: 100%; justify-content: center; } /* Categories list — drag-and-drop order */ .cat-drag-handle { cursor: grab; width: 28px; text-align: center; vertical-align: middle !important; user-select: none; color: var(--text-muted); } .cat-drag-handle:active { cursor: grabbing; } .cat-drag-grip { display: inline-block; font-size: 12px; line-height: 1; opacity: 0.5; letter-spacing: 1px; } .cat-drag-grip::before { content: '⋮⋮'; } .cat-sort-ghost { opacity: 0.45; background: var(--bg-hover, #f0f5ff) !important; } .cat-sort-chosen { background: var(--bg-hover, #f0f5ff) !important; } .cat-list-id-cell { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; } .cat-list-cover-thumb { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); flex-shrink: 0; display: block; } .cat-list-id-num { font-variant-numeric: tabular-nums; } /* Categories tree — collapse subcategories in admin list */ .cat-name-cell { vertical-align: middle; } .cat-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 4px; padding: 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 4px; vertical-align: middle; flex-shrink: 0; } .cat-tree-toggle:hover { background: var(--bg-hover); color: var(--primary); } .cat-tree-toggle-spacer { display: inline-block; width: 22px; margin-right: 4px; vertical-align: middle; flex-shrink: 0; } tr.cat-tree-row-hidden { display: none !important; } /* Posts list — compact published status */ .post-list-status-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--success, #16a34a); font-size: 15px; line-height: 1; } .post-list-status-ico--published { cursor: default; }