From 268ef262c36851c0498eabc63ebbf022a728eb2c Mon Sep 17 00:00:00 2001 From: Professional Date: Mon, 26 May 2025 00:24:21 +0700 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/admin/AdminDashboard.vue | 183 +++++++++------ src/views/admin/AdminStatistics.vue | 334 +++++++++++++++++++++------- src/views/admin/AdminUserDetail.vue | 221 +++++++++++++++--- src/views/admin/AdminUsers.vue | 152 +++++++++++-- 4 files changed, 676 insertions(+), 214 deletions(-) diff --git a/src/views/admin/AdminDashboard.vue b/src/views/admin/AdminDashboard.vue index 83c99ad..c897aeb 100644 --- a/src/views/admin/AdminDashboard.vue +++ b/src/views/admin/AdminDashboard.vue @@ -5,7 +5,7 @@ -

Административная панель

+

Панель управления

{{ user?.name || 'Администратор' }} @@ -37,7 +37,7 @@
- Меню + Меню администратора @@ -161,11 +161,12 @@ export default { display: flex; justify-content: space-between; align-items: center; - padding: 0.5rem 1rem; - background-color: #ff3e68; + padding: 0.75rem 1rem; + background: linear-gradient(135deg, #ff3e68 0%, #ff5252 100%); color: white; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(255, 62, 104, 0.2); z-index: 100; + height: var(--header-height, 56px); } .admin-header-left { @@ -175,8 +176,10 @@ export default { } .admin-header h1 { - font-size: 1.5rem; + font-size: 1.4rem; margin: 0; + font-weight: 600; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .menu-toggle-btn { @@ -189,6 +192,7 @@ export default { display: flex; align-items: center; justify-content: center; + -webkit-tap-highlight-color: transparent; } .admin-user-info { @@ -199,30 +203,38 @@ export default { .logout-btn { padding: 0.4rem 1rem; - background-color: white; - color: #ff3e68; + background-color: rgba(255, 255, 255, 0.2); + color: white; border: none; - border-radius: 4px; + border-radius: 50px; cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; + transition: all 0.2s ease; +} + +.logout-btn:hover { + background-color: rgba(255, 255, 255, 0.3); + transform: translateY(-2px); } .admin-content { display: flex; flex: 1; overflow: hidden; + position: relative; } /* Стили для десктопной боковой панели */ .admin-sidebar { - width: 200px; - background-color: white; - box-shadow: 1px 0 3px rgba(0,0,0,0.1); + width: 220px; + background: linear-gradient(to bottom, #ffffff, #f9f9f9); + box-shadow: 1px 0 5px rgba(0,0,0,0.05); overflow-y: auto; flex-shrink: 0; + border-right: 1px solid rgba(0,0,0,0.05); } .admin-sidebar nav { @@ -232,26 +244,40 @@ export default { } .admin-sidebar a { - padding: 0.75rem 1.5rem; - color: #333; + padding: 0.85rem 1.5rem; + color: #444; text-decoration: none; - transition: background-color 0.3s; + transition: all 0.3s ease; display: flex; align-items: center; gap: 0.75rem; + border-left: 3px solid transparent; } .admin-sidebar a i { font-size: 1.2rem; + color: #666; + transition: color 0.3s ease; } .admin-sidebar a:hover { - background-color: #f0f0f0; + background-color: rgba(255, 62, 104, 0.05); + color: #ff3e68; +} + +.admin-sidebar a:hover i { + color: #ff3e68; } .admin-sidebar a.active { - background-color: #ff3e68; - color: white; + background-color: rgba(255, 62, 104, 0.1); + color: #ff3e68; + font-weight: 500; + border-left: 3px solid #ff3e68; +} + +.admin-sidebar a.active i { + color: #ff3e68; } /* Стили для мобильной боковой панели */ @@ -277,6 +303,7 @@ export default { height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1; + backdrop-filter: blur(2px); } .sidebar-content { @@ -286,9 +313,9 @@ export default { width: 80%; max-width: 300px; height: 100%; - background-color: white; + background: white; z-index: 2; - box-shadow: 2px 0 10px rgba(0,0,0,0.2); + box-shadow: 2px 0 15px rgba(0,0,0,0.15); display: flex; flex-direction: column; animation: slideIn 0.25s ease-out; @@ -307,8 +334,8 @@ export default { display: flex; align-items: center; justify-content: space-between; - padding: 1rem; - background-color: #ff3e68; + padding: 1.2rem 1rem; + background: linear-gradient(135deg, #ff3e68 0%, #ff5252 100%); color: white; } @@ -317,23 +344,35 @@ export default { border: none; color: white; font-size: 1.2rem; + padding: 0.3rem; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 32px; + height: 32px; +} + +.close-sidebar-btn:hover { + background-color: rgba(255, 255, 255, 0.2); } .admin-sidebar-mobile nav { display: flex; flex-direction: column; flex: 1; - padding: 1rem 0; + padding: 0.5rem 0; } .admin-sidebar-mobile a { padding: 1rem 1.5rem; - color: #333; + color: #444; text-decoration: none; display: flex; align-items: center; gap: 0.75rem; + transition: all 0.2s ease; } .admin-sidebar-mobile a i { @@ -349,7 +388,7 @@ export default { .mobile-logout-container { margin-top: auto; padding: 1rem 1.5rem; - border-top: 1px solid #eee; + border-top: 1px solid rgba(0,0,0,0.05); } .mobile-logout-btn { @@ -357,14 +396,19 @@ export default { align-items: center; gap: 0.75rem; width: 100%; - padding: 0.75rem; - background-color: #f8f9fa; - color: #dc3545; - border: 1px solid #dee2e6; - border-radius: 4px; + padding: 0.85rem; + background-color: rgba(255, 62, 104, 0.08); + color: #ff3e68; + border: 1px solid rgba(255, 62, 104, 0.2); + border-radius: 8px; font-weight: 500; cursor: pointer; text-align: left; + transition: all 0.2s ease; +} + +.mobile-logout-btn:hover { + background-color: rgba(255, 62, 104, 0.12); } .admin-main-content { @@ -383,47 +427,12 @@ export default { right: 0; height: var(--nav-height, 60px); background: white; - box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12); z-index: 1000; padding-bottom: env(safe-area-inset-bottom, 0); } -/* На мобильных устройствах */ -@media (max-width: 767px) { - .admin-header h1 { - font-size: 1.25rem; - } - - .user-name { - display: none; - } - - .logout-text { - display: none; - } - - .logout-btn { - padding: 0.4rem; - } - - .logout-btn i { - font-size: 1.2rem; - margin: 0; - } - - .admin-main-content { - padding: 1rem; - height: calc(100vh - 56px - 56px - env(safe-area-inset-bottom, 0px)); /* header + nav + safe area */ - padding-bottom: 1rem; - } - - .admin-mobile-nav { - display: flex; - --nav-height: 56px; - } -} - -/* CSS для мобильной навигации в админ-панели */ +/* Стили для мобильной навигации админ-панели */ .admin-mobile-nav .nav-item { flex: 1; display: flex; @@ -431,8 +440,8 @@ export default { align-items: center; justify-content: center; text-decoration: none; - color: #6c757d; - transition: all 0.2s ease; + color: #777; + transition: all 0.3s ease; padding: 0; position: relative; } @@ -466,6 +475,42 @@ export default { --header-height: 56px; } +/* На мобильных устройствах */ +@media (max-width: 767px) { + .admin-header h1 { + font-size: 1.25rem; + } + + .user-name { + display: none; + } + + .logout-text { + display: none; + } + + .logout-btn { + padding: 0.4rem; + background-color: transparent; + } + + .logout-btn i { + font-size: 1.2rem; + margin: 0; + } + + .admin-main-content { + padding: 1rem; + height: calc(100vh - 56px - 56px - env(safe-area-inset-bottom, 0px)); /* header + nav + safe area */ + padding-bottom: 1rem; + } + + .admin-mobile-nav { + display: flex; + --nav-height: 56px; + } +} + /* Поддержка устройств с вырезом (iPhone X и новее) */ @supports (padding: env(safe-area-inset-bottom)) { .admin-mobile-nav { diff --git a/src/views/admin/AdminStatistics.vue b/src/views/admin/AdminStatistics.vue index 8f549c1..1f123ad 100644 --- a/src/views/admin/AdminStatistics.vue +++ b/src/views/admin/AdminStatistics.vue @@ -196,18 +196,21 @@ h2 { margin-top: 0; margin-bottom: 1.5rem; color: #333; + font-weight: 600; + position: relative; + padding-left: 0.75rem; + display: inline-block; } -h3 { - margin-top: 0; - margin-bottom: 1.25rem; - color: #333; -} - -h4 { - margin-top: 1.5rem; - margin-bottom: 1rem; - color: #444; +h2::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 3px; + background: linear-gradient(to bottom, #ff3e68, #ff5252); + border-radius: 3px; } .loading-indicator { @@ -219,9 +222,10 @@ h4 { .error-message { padding: 1rem; background-color: #ffebee; + border-left: 4px solid #f44336; color: #d32f2f; + margin-bottom: 1.5rem; border-radius: 4px; - margin-bottom: 1rem; } .statistics-container { @@ -230,127 +234,285 @@ h4 { gap: 2rem; } -.stat-section { +.chart-container { background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; + overflow: hidden; } -.stat-cards { +.section-title { + margin-top: 0; + margin-bottom: 1rem; + font-weight: 600; + color: #333; +} + +.stats-section { + border-radius: 8px; + margin-bottom: 2rem; +} + +.stats-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .stat-card { - background-color: #f9f9f9; - border-radius: 6px; - padding: 1.25rem; + background-color: white; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + padding: 1.5rem; text-align: center; + transition: all 0.3s ease; + border-top: 3px solid transparent; +} + +.stat-card:hover { + transform: translateY(-3px); + box-shadow: 0 4px 12px rgba(0,0,0,0.08); +} + +.stat-card.users { + border-color: #ff3e68; +} + +.stat-card.messages { + border-color: #4caf50; +} + +.stat-card.conversations { + border-color: #2196f3; +} + +.stat-card.views { + border-color: #ff9800; } .stat-value { - font-size: 2rem; + font-size: 2.2rem; font-weight: bold; - color: #ff3e68; + color: #333; margin-bottom: 0.5rem; } +.stat-card.users .stat-value { + color: #ff3e68; +} + +.stat-card.messages .stat-value { + color: #4caf50; +} + +.stat-card.conversations .stat-value { + color: #2196f3; +} + +.stat-card.views .stat-value { + color: #ff9800; +} + .stat-label { - color: #666; + color: #777; + font-size: 0.9rem; } .gender-distribution { - margin-top: 1.5rem; -} - -.gender-chart { + display: flex; + gap: 1rem; + flex-wrap: wrap; margin-top: 1rem; } -.gender-bar { - display: flex; - height: 40px; - background-color: #f5f5f5; - border-radius: 4px; - overflow: hidden; +.gender-card { + flex: 1; + min-width: 150px; + padding: 1rem; + background-color: #f8f9fa; + border-radius: 8px; + text-align: center; + border-left: 3px solid transparent; + transition: all 0.2s ease; +} + +.gender-card:hover { + background-color: white; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + transform: translateY(-2px); +} + +.gender-card.male { + border-color: #2196f3; +} + +.gender-card.female { + border-color: #e91e63; +} + +.gender-card.other { + border-color: #9c27b0; +} + +.gender-value { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 0.25rem; +} + +.gender-card.male .gender-value { + color: #2196f3; +} + +.gender-card.female .gender-value { + color: #e91e63; +} + +.gender-card.other .gender-value { + color: #9c27b0; +} + +.gender-label { + color: #777; + font-size: 0.9rem; +} + +.averages-section { + margin-top: 1.5rem; +} + +.averages-title { + margin-top: 0; margin-bottom: 1rem; -} - -.gender-bar > div { - display: flex; - align-items: center; - justify-content: center; - color: white; font-weight: 500; - transition: width 0.5s ease; + color: #333; + font-size: 1.1rem; } -.gender-male { - background-color: #2196f3; -} - -.gender-female { - background-color: #e91e63; -} - -.gender-other { - background-color: #9c27b0; -} - -.gender-legend { +.averages-container { display: flex; flex-wrap: wrap; - gap: 1.25rem; -} - -.legend-item { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.legend-color { - width: 20px; - height: 20px; - border-radius: 4px; -} - -.legend-color.male { - background-color: #2196f3; -} - -.legend-color.female { - background-color: #e91e63; -} - -.legend-color.other { - background-color: #9c27b0; -} - -.average-stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .average-item { + background-color: #f8f9fa; + padding: 0.8rem 1.2rem; + border-radius: 8px; + flex: 1; + min-width: 200px; display: flex; - align-items: center; justify-content: space-between; - background-color: #f9f9f9; - padding: 1rem; - border-radius: 6px; + align-items: center; } .average-label { - font-weight: 400; color: #555; + font-weight: 500; } .average-value { - font-weight: 600; + font-weight: bold; color: #ff3e68; } + +.donut-chart { + max-width: 300px; + margin: 0 auto; +} + +.subcards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 0.5rem; + margin-top: 1rem; +} + +.subcard { + background-color: #f8f9fa; + padding: 0.8rem; + border-radius: 6px; + text-align: center; +} + +.subcard-value { + font-weight: bold; + color: #ff3e68; + font-size: 1.2rem; +} + +.subcard-label { + font-size: 0.75rem; + color: #777; + margin-top: 0.25rem; +} + +/* Адаптивное отображение */ +@media (max-width: 767px) { + .stat-value { + font-size: 1.8rem; + } + + .gender-value { + font-size: 1.3rem; + } + + h2 { + font-size: 1.4rem; + margin-bottom: 1.2rem; + } + + .section-title { + font-size: 1.1rem; + } + + .stats-cards { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + } + + .admin-statistics { + padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); + } +} + +@media (max-width: 576px) { + .stat-card { + padding: 1.2rem; + } + + .stat-value { + font-size: 1.6rem; + } + + .stats-cards { + grid-template-columns: repeat(2, 1fr); + } + + .gender-distribution { + flex-direction: column; + } + + .gender-card { + min-width: auto; + } + + h2 { + font-size: 1.2rem; + } +} + +/* Устройства с вырезом (notch) */ +@supports (padding: env(safe-area-inset-bottom)) { + .admin-statistics { + padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); + } +} + +/* Ландшафтная ориентация на мобильных */ +@media (max-height: 450px) and (orientation: landscape) { + .admin-statistics { + padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); + } +} \ No newline at end of file diff --git a/src/views/admin/AdminUserDetail.vue b/src/views/admin/AdminUserDetail.vue index f48199c..ec2b48e 100644 --- a/src/views/admin/AdminUserDetail.vue +++ b/src/views/admin/AdminUserDetail.vue @@ -309,31 +309,54 @@ export default { .back-btn { padding: 0.5rem 1rem; - background-color: #f5f5f5; - border: 1px solid #ddd; - border-radius: 4px; + background-color: white; + border: 1px solid #e9ecef; + border-radius: 6px; cursor: pointer; - color: #333; + color: #495057; + font-weight: 500; + transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.back-btn:hover { + background-color: #f8f9fa; + transform: translateX(-2px); } .status-btn { padding: 0.5rem 1rem; border: none; - border-radius: 4px; + border-radius: 6px; cursor: pointer; font-weight: 500; + transition: all 0.2s ease; +} + +.status-btn:hover { + transform: translateY(-2px); } .block-btn { - background-color: #ffebee; + background-color: rgba(211, 47, 47, 0.1); color: #d32f2f; } +.block-btn:hover { + background-color: rgba(211, 47, 47, 0.15); +} + .unblock-btn { - background-color: #e8f5e9; + background-color: rgba(46, 125, 50, 0.1); color: #2e7d32; } +.unblock-btn:hover { + background-color: rgba(46, 125, 50, 0.15); +} + .loading-indicator { text-align: center; padding: 2rem; @@ -343,21 +366,38 @@ export default { .error-message { padding: 1rem; background-color: #ffebee; + border-left: 4px solid #f44336; color: #d32f2f; + margin-bottom: 1.5rem; border-radius: 4px; - margin-bottom: 1rem; } h2 { margin-top: 0; margin-bottom: 1.5rem; color: #333; + position: relative; + padding-left: 0.75rem; + display: inline-block; + font-weight: 600; +} + +h2::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 3px; + background: linear-gradient(to bottom, #ff3e68, #ff5252); + border-radius: 3px; } h3 { margin-top: 0; margin-bottom: 1rem; color: #333; + font-weight: 600; } .user-container { @@ -385,6 +425,8 @@ h3 { height: 100px; border-radius: 50%; overflow: hidden; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + border: 3px solid white; } .user-photo img { @@ -403,36 +445,40 @@ h3 { font-weight: bold; } -.user-name-status { - display: flex; - flex-direction: column; - gap: 0.5rem; +.user-info { + flex: 1; } -.user-name-status h3 { - margin: 0; +.user-name { font-size: 1.5rem; + font-weight: 600; + margin: 0 0 0.5rem; + color: #ff3e68; } -.status-badge { +.user-status { display: inline-block; - padding: 0.3rem 0.6rem; - border-radius: 20px; - font-size: 0.875rem; + padding: 0.25rem 0.75rem; + border-radius: 50px; + font-size: 0.8rem; font-weight: 500; } -.status-badge.active { +.user-status.active { background-color: #e8f5e9; color: #2e7d32; } -.status-badge.blocked { +.user-status.blocked { background-color: #ffebee; color: #d32f2f; } .user-details { + margin-top: 1.5rem; +} + +.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; @@ -451,28 +497,32 @@ h3 { .detail-label { font-size: 0.875rem; - color: #666; + color: #6c757d; margin-bottom: 0.25rem; } .detail-value { font-weight: 500; + color: #495057; } .user-bio { margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid #e9ecef; } .user-bio h4 { margin-top: 0; margin-bottom: 0.5rem; color: #333; + font-weight: 600; } .user-bio p { margin: 0; line-height: 1.5; - color: #444; + color: #495057; white-space: pre-wrap; } @@ -490,10 +540,19 @@ h3 { } .stat-card { - background-color: #f9f9f9; - border-radius: 6px; + background-color: #f8f9fa; + border-radius: 8px; padding: 1rem; text-align: center; + transition: all 0.3s ease; + border: 1px solid transparent; +} + +.stat-card:hover { + background-color: white; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + border-color: rgba(255, 62, 104, 0.1); + transform: translateY(-2px); } .stat-value { @@ -501,10 +560,11 @@ h3 { font-weight: bold; color: #ff3e68; margin-bottom: 0.5rem; + line-height: 1; } .stat-label { - color: #666; + color: #6c757d; font-size: 0.9rem; } @@ -522,27 +582,118 @@ h3 { } .photo-item { - position: relative; border-radius: 8px; overflow: hidden; - aspect-ratio: 1/1; + aspect-ratio: 3/4; + max-height: 300px; } .photo-item img { width: 100%; height: 100%; object-fit: cover; + transition: transform 0.3s ease; } -.photo-badge { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0,0,0,0.7); - color: white; - padding: 0.3rem; +.photo-item:hover img { + transform: scale(1.03); +} + +.no-photos { + text-align: center; + padding: 2rem; + color: #6c757d; + background-color: #f8f9fa; + border-radius: 6px; +} + +.user-actions { + background-color: white; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + padding: 1.5rem; +} + +.actions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; +} + +.badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 50px; font-size: 0.8rem; + font-weight: 500; text-align: center; } + +.badge-primary { + background-color: rgba(25, 118, 210, 0.1); + color: #1976d2; +} + +/* Адаптивные стили */ +@media (max-width: 767px) { + .header-controls { + flex-direction: column; + gap: 1rem; + } + + .back-btn, .status-btn { + width: 100%; + justify-content: center; + } + + .user-header { + flex-direction: column; + text-align: center; + } + + .user-photo { + margin: 0 auto; + } + + .user-name { + font-size: 1.3rem; + } + + .details-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } + + .stat-value { + font-size: 1.5rem; + } + + .admin-user-detail { + padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); + } +} + +@media (max-width: 576px) { + .photos-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Устройства с вырезом (notch) */ +@supports (padding: env(safe-area-inset-bottom)) { + .admin-user-detail { + padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); + } +} + +/* Ландшафтная ориентация на мобильных */ +@media (max-height: 450px) and (orientation: landscape) { + .admin-user-detail { + padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); + } +} \ No newline at end of file diff --git a/src/views/admin/AdminUsers.vue b/src/views/admin/AdminUsers.vue index 3c5c4b8..dd477f4 100644 --- a/src/views/admin/AdminUsers.vue +++ b/src/views/admin/AdminUsers.vue @@ -272,6 +272,21 @@ h2 { margin-top: 0; margin-bottom: 1.5rem; color: #333; + font-weight: 600; + position: relative; + padding-left: 0.5rem; + display: inline-block; +} + +h2::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 3px; + background: linear-gradient(to bottom, #ff3e68, #ff5252); + border-radius: 3px; } .search-bar { @@ -284,8 +299,16 @@ h2 { .search-bar input { padding: 0.75rem; border: 1px solid #ddd; - border-radius: 4px; + border-radius: 8px; width: 100%; + box-shadow: 0 2px 5px rgba(0,0,0,0.03); + transition: all 0.3s ease; +} + +.search-bar input:focus { + border-color: #ff3e68; + box-shadow: 0 2px 8px rgba(255, 62, 104, 0.1); + outline: none; } .filter-options { @@ -299,6 +322,20 @@ h2 { align-items: center; gap: 0.5rem; cursor: pointer; + padding: 0.5rem 0.8rem; + border-radius: 6px; + transition: all 0.2s ease; + background-color: #f8f9fa; +} + +.filter-options label:hover { + background-color: #f1f3f5; +} + +.filter-options input:checked + label { + background-color: rgba(255, 62, 104, 0.1); + color: #ff3e68; + font-weight: 500; } .loading-indicator { @@ -310,41 +347,63 @@ h2 { .error-message { padding: 1rem; background-color: #ffebee; + border-left: 4px solid #f44336; color: #d32f2f; + margin-bottom: 1.5rem; border-radius: 4px; - margin-bottom: 1rem; } .users-table-container { overflow-x: auto; - width: 100%; - margin-bottom: env(safe-area-inset-bottom, 0px); + margin-bottom: 1.5rem; } .users-table { width: 100%; border-collapse: collapse; - margin-bottom: 1rem; - min-width: 600px; /* Минимальная ширина таблицы */ + min-width: 800px; + background: white; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .users-table th, .users-table td { + padding: 0.8rem 1rem; text-align: left; - padding: 0.75rem; - border-bottom: 1px solid #eee; } .users-table th { - background-color: #f5f5f5; - font-weight: 500; - color: #444; + background-color: #f8f9fa; + color: #495057; + font-weight: 600; + position: sticky; + top: 0; + z-index: 10; + box-shadow: 0 1px 0 rgba(0,0,0,0.05); +} + +.users-table tbody tr { + border-top: 1px solid #f1f3f5; + transition: all 0.2s ease; +} + +.users-table tbody tr:hover { + background-color: rgba(255, 62, 104, 0.03); +} + +.email-cell { + max-width: 250px; + overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } .status-badge { - padding: 0.3rem 0.6rem; - border-radius: 20px; - font-size: 0.875rem; + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 50px; + font-size: 0.8rem; + font-weight: 500; white-space: nowrap; } @@ -367,34 +426,53 @@ h2 { .btn { padding: 0.4rem 0.75rem; border: none; - border-radius: 4px; + border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; + transition: all 0.2s ease; +} + +.btn:hover { + transform: translateY(-2px); } .view-btn { - background-color: #e3f2fd; + background-color: rgba(25, 118, 210, 0.1); color: #1976d2; } +.view-btn:hover { + background-color: rgba(25, 118, 210, 0.15); +} + .block-btn { - background-color: #ffebee; + background-color: rgba(211, 47, 47, 0.1); color: #d32f2f; } +.block-btn:hover { + background-color: rgba(211, 47, 47, 0.15); +} + .unblock-btn { - background-color: #e8f5e9; + background-color: rgba(46, 125, 50, 0.1); color: #2e7d32; } +.unblock-btn:hover { + background-color: rgba(46, 125, 50, 0.15); +} + .no-results { - text-align: center; padding: 2rem; + text-align: center; color: #666; + background-color: #f9f9f9; + border-radius: 8px; } .pagination { @@ -408,10 +486,18 @@ h2 { .pagination-btn { padding: 0.5rem 1rem; - background-color: #f5f5f5; - border: 1px solid #ddd; - border-radius: 4px; + background-color: white; + border: 1px solid #e9ecef; + border-radius: 6px; cursor: pointer; + transition: all 0.2s ease; + color: #495057; + font-weight: 500; +} + +.pagination-btn:hover:not(:disabled) { + background-color: #f8f9fa; + border-color: #ced4da; } .pagination-btn:disabled { @@ -420,7 +506,7 @@ h2 { } .pagination-info { - color: #666; + color: #6c757d; } /* Адаптивное отображение */ @@ -483,8 +569,22 @@ h2 { } .btn i { - margin: 0; font-size: 1.1rem; + margin: 0; + } + + .pagination { + gap: 0.5rem; + } + + .pagination-btn { + padding: 0.4rem 0.7rem; + font-size: 0.85rem; + } + + h2 { + font-size: 1.3rem; + margin-bottom: 1rem; } /* На мобильных добавляем отступ снизу для нижней навигации */ @@ -502,6 +602,10 @@ h2 { .email-cell { max-width: 80px; } + + h2 { + font-size: 1.2rem; + } } /* Устройства с вырезом (notch) */