.widget_knn_online_users {
background: linear-gradient(135deg, #f5f7fa 0%, #f8fafc 100%);
border-radius: 16px;
box-shadow: 
0 1px 1px rgba(0,0,0,0.02),
0 2px 2px rgba(0,0,0,0.02),
0 4px 4px rgba(0,0,0,0.02),
0 8px 8px rgba(0,0,0,0.03),
0 16px 16px rgba(0,0,0,0.03);
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(255,255,255,0.5);
backdrop-filter: blur(8px);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.widget_knn_online_users:hover {
box-shadow: 
0 1px 1px rgba(0,0,0,0.03),
0 2px 2px rgba(0,0,0,0.03),
0 4px 4px rgba(0,0,0,0.03),
0 8px 8px rgba(0,0,0,0.04),
0 16px 16px rgba(0,0,0,0.04),
0 24px 24px rgba(0,0,0,0.05);
transform: translateY(-3px) scale(1.005);
} .widget_knn_online_users .widget-title {
font-size: 1.3em;
color: #2d3748;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0,0,0,0.05);
display: flex;
align-items: center;
font-weight: 600;
}
.online-title-icon {
margin-right: 10px;
font-size: 1.2em;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
} .widget_knn_online_users .knn-online-users-count {
background: rgba(74, 85, 104, 0.1);
padding: 8px 15px;
border-radius: 50px;
font-size: 0.9em;
color: #4a5568;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.widget_knn_online_users .knn-online-users-count:hover {
background: rgba(74, 85, 104, 0.2);
}
.count-bubble {
background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 0.8em;
font-weight: bold;
box-shadow: 
0 1px 1px rgba(76, 175, 80, 0.2),
0 2px 2px rgba(76, 175, 80, 0.15),
0 4px 4px rgba(76, 175, 80, 0.1);
} .widget_knn_online_users .knn-online-users-list {
list-style: none;
padding: 0;
margin: 0 -5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
} .widget_knn_online_users .knn-online-user,
.widget_knn_online_users .knn-online-guest {
display: flex;
flex-direction: column;
align-items: center;
width: 80px;
margin: 0 5px 15px;
position: relative;
}
.widget_knn_online_users .user-card,
.widget_knn_online_users .guest-card {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
will-change: transform;
}
.widget_knn_online_users .user-card:hover,
.widget_knn_online_users .guest-card:hover {
transform: translateY(-5px);
} .widget_knn_online_users .avatar-container {
position: relative;
margin-bottom: 8px;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.widget_knn_online_users .user-card:hover .avatar-container,
.widget_knn_online_users .guest-card:hover .avatar-container {
transform: scale(1.05);
} .widget_knn_online_users .knn-online-user img.avatar,
.widget_knn_online_users .guest-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
box-shadow: 
0 1px 1px rgba(0,0,0,0.05),
0 2px 2px rgba(0,0,0,0.05),
0 4px 4px rgba(0,0,0,0.05),
0 6px 6px rgba(0,0,0,0.06);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.widget_knn_online_users .guest-avatar {
background-color: #e2e8f0;
padding: 8px;
box-sizing: border-box;
}
.widget_knn_online_users .user-card:hover img.avatar,
.widget_knn_online_users .guest-card:hover .guest-avatar {
box-shadow: 
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.06),
0 8px 8px rgba(0,0,0,0.07),
0 12px 12px rgba(0,0,0,0.08);
} .widget_knn_online_users .online-status {
position: absolute;
bottom: 5px;
right: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
box-shadow: 
0 0 0 1px rgba(76, 175, 80, 0.2),
0 0 0 2px rgba(76, 175, 80, 0.15);
animation: knn-pulse 1.5s infinite;
z-index: 2;
}
.widget_knn_online_users .user-status {
background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
border: 2px solid white;
}
.widget_knn_online_users .guest-status {
background: linear-gradient(135deg, #FFB74D 0%, #FFCC80 100%);
border: 2px solid white;
} .widget_knn_online_users .knn-online-user-name,
.widget_knn_online_users .knn-online-guest-count {
font-size: 0.8em;
color: #4a5568;
text-align: center;
word-break: break-word;
line-height: 1.4;
font-weight: 500;
transition: all 0.3s ease;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.widget_knn_online_users .user-card:hover .knn-online-user-name,
.widget_knn_online_users .guest-card:hover .knn-online-guest-count {
color: #2d3748;
font-weight: 600;
} .widget_knn_online_users .user-type {
font-size: 0.8em;
color: #718096;
margin-top: 5px;
padding-top: 5px;
border-top: 1px dashed rgba(0,0,0,0.05);
} .widget_knn_online_users .user-hover-card,
.widget_knn_online_users .guest-hover-card {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 180px;
background: white;
border-radius: 12px;
padding: 15px;
opacity: 0;
visibility: hidden;
transition: 
opacity 0.3s ease-out,
transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 10;
pointer-events: none;
text-align: center;
box-shadow: 
0 4px 6px rgba(0,0,0,0.1),
0 2px 4px rgba(0,0,0,0.06);
}
.widget_knn_online_users .user-card:hover .user-hover-card,
.widget_knn_online_users .guest-card:hover .guest-hover-card {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.widget_knn_online_users .user-hover-card h4,
.widget_knn_online_users .guest-hover-card h4 {
margin: 10px 0 5px;
font-size: 1em;
color: #2d3748;
}
.widget_knn_online_users .user-hover-card p,
.widget_knn_online_users .guest-hover-card p {
margin: 5px 0;
font-size: 0.85em;
color: #4a5568;
}
.widget_knn_online_users .hover-avatar {
margin: 0 auto 10px;
}
.widget_knn_online_users .hover-avatar img {
width: 120px;
height: 120px;
border-radius: 50%;
} .activity-icon {
display: inline-block;
width: 12px;
height: 12px;
background: #4CAF50;
border-radius: 50%;
margin-right: 5px;
animation: knn-pulse 1.5s infinite;
} .knn-online-users-loading {
text-align: center;
padding: 20px 0;
}
.loading-spinner {
width: 40px;
height: 40px;
margin: 0 auto 10px;
border: 3px solid rgba(76, 175, 80, 0.2);
border-radius: 50%;
border-top-color: #4CAF50;
animation: knn-spin 1s ease-in-out infinite;
} .widget_knn_online_users .knn-no-online-users {
padding: 20px 0;
}
.widget_knn_online_users .empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.widget_knn_online_users .empty-icon {
display: block;
color: #718096;
margin-bottom: 10px;
}
.widget_knn_online_users .empty-state p {
margin: 0;
color: #718096;
font-size: 0.9em;
} @keyframes knn-spin {
to { transform: rotate(360deg); }
}
@keyframes knn-pulse {
0% { 
transform: scale(0.95); 
box-shadow: 
0 0 0 0 rgba(76, 175, 80, 0.4),
0 0 0 1px rgba(76, 175, 80, 0.3);
}
70% { 
transform: scale(1.05); 
box-shadow: 
0 0 0 4px rgba(76, 175, 80, 0.1),
0 0 0 6px rgba(76, 175, 80, 0);
}
100% { 
transform: scale(0.95); 
box-shadow: 
0 0 0 0 rgba(76, 175, 80, 0),
0 0 0 1px rgba(76, 175, 80, 0.1);
}
} @media (max-width: 480px) {
.widget_knn_online_users {
padding: 20px 15px;
border-radius: 12px;
}
.widget_knn_online_users .knn-online-user,
.widget_knn_online_users .knn-online-guest {
width: 70px;
}
.widget_knn_online_users .knn-online-user img.avatar,
.widget_knn_online_users .guest-avatar {
width: 50px;
height: 50px;
}
.widget_knn_online_users .user-hover-card,
.widget_knn_online_users .guest-hover-card {
width: 160px;
padding: 12px;
}
} .dark-theme .widget_knn_online_users,
body.theme-dark .widget_knn_online_users {
background: #323335;
border-color: rgba(255,255,255,0.08);
}
.dark-theme .widget_knn_online_users .widget-title,
body.theme-dark .widget_knn_online_users .widget-title {
color: #e2e8f0;
border-bottom-color: rgba(255,255,255,0.08);
}
.dark-theme .widget_knn_online_users .online-title-icon,
body.theme-dark .widget_knn_online_users .online-title-icon {
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.dark-theme .widget_knn_online_users .knn-online-users-count,
body.theme-dark .widget_knn_online_users .knn-online-users-count {
background: rgba(255,255,255,0.08);
color: #e2e8f0;
}
.dark-theme .widget_knn_online_users .knn-online-users-count:hover,
body.theme-dark .widget_knn_online_users .knn-online-users-count:hover {
background: rgba(255,255,255,0.12);
}
.dark-theme .widget_knn_online_users .knn-online-user-name,
.dark-theme .widget_knn_online_users .knn-online-guest-count,
body.theme-dark .widget_knn_online_users .knn-online-user-name,
body.theme-dark .widget_knn_online_users .knn-online-guest-count {
color: #cbd5e0;
}
.dark-theme .widget_knn_online_users .user-card:hover .knn-online-user-name,
.dark-theme .widget_knn_online_users .guest-card:hover .knn-online-guest-count,
body.theme-dark .widget_knn_online_users .user-card:hover .knn-online-user-name,
body.theme-dark .widget_knn_online_users .guest-card:hover .knn-online-guest-count {
color: #f7fafc;
}
.dark-theme .widget_knn_online_users .knn-online-user img.avatar,
.dark-theme .widget_knn_online_users .guest-avatar,
body.theme-dark .widget_knn_online_users .knn-online-user img.avatar,
body.theme-dark .widget_knn_online_users .guest-avatar {
border-color: #323335;
box-shadow: 
0 1px 1px rgba(0,0,0,0.2),
0 2px 2px rgba(0,0,0,0.2),
0 4px 4px rgba(0,0,0,0.2);
}
.dark-theme .widget_knn_online_users .guest-avatar,
body.theme-dark .widget_knn_online_users .guest-avatar {
background-color: #4a5568;
}
.dark-theme .widget_knn_online_users .user-status,
.dark-theme .widget_knn_online_users .guest-status,
body.theme-dark .widget_knn_online_users .user-status,
body.theme-dark .widget_knn_online_users .guest-status {
border-color: #323335;
}
.dark-theme .widget_knn_online_users .user-type,
body.theme-dark .widget_knn_online_users .user-type {
color: #a0aec0;
border-top-color: rgba(255,255,255,0.05);
}
.dark-theme .widget_knn_online_users .user-hover-card,
.dark-theme .widget_knn_online_users .guest-hover-card,
body.theme-dark .widget_knn_online_users .user-hover-card,
body.theme-dark .widget_knn_online_users .guest-hover-card {
background: #323335;
border: 1px solid rgba(255,255,255,0.08);
}
.dark-theme .widget_knn_online_users .user-hover-card h4,
.dark-theme .widget_knn_online_users .guest-hover-card h4,
body.theme-dark .widget_knn_online_users .user-hover-card h4,
body.theme-dark .widget_knn_online_users .guest-hover-card h4 {
color: #e2e8f0;
}
.dark-theme .widget_knn_online_users .user-hover-card p,
.dark-theme .widget_knn_online_users .guest-hover-card p,
body.theme-dark .widget_knn_online_users .user-hover-card p,
body.theme-dark .widget_knn_online_users .guest-hover-card p {
color: #cbd5e0;
}
.dark-theme .knn-online-users-loading p,
body.theme-dark .knn-online-users-loading p {
color: #e2e8f0;
}
.dark-theme .loading-spinner,
body.theme-dark .loading-spinner {
border-color: rgba(76, 175, 80, 0.1);
border-top-color: #81C784;
}
.dark-theme .widget_knn_online_users .empty-state p,
body.theme-dark .widget_knn_online_users .empty-state p {
color: #a0aec0;
}
.dark-theme .widget_knn_online_users .empty-icon,
body.theme-dark .widget_knn_online_users .empty-icon {
color: #a0aec0;
}