Kamil Alekberov
fe0a8c7f72
- On mobile (≤768px), replace the full search bar in the topbar with a search icon button; tapping it expands a full-width search overlay with a back arrow to collapse (Google Drive-style pattern) - Escape key also collapses the mobile search overlay - Hide the redundant inline search icon when the mobile search bar is active (submit button already has one) - Move the language selector from the topbar into the user menu for all screen sizes, reducing topbar clutter; it renders as an accordion row matching other menu items - Fix user menu positioning in RTL layouts (Arabic/Persian): anchor to left:0 instead of right:0 so the panel opens inward rather than off-screen
281 lines
5.4 KiB
CSS
281 lines
5.4 KiB
CSS
/* User Menu */
|
|
.user-menu-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.user-avatar-btn {
|
|
background: none;
|
|
border: 2px solid transparent;
|
|
border-radius: 50%;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.user-avatar-btn:hover {
|
|
border-color: var(--color-accent-ring-xl);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.user-avatar-btn:hover .user-avatar {
|
|
box-shadow: 0 0 0 2px var(--color-accent-ring-strong);
|
|
}
|
|
|
|
.user-menu-wrapper.open .user-avatar-btn {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 38px;
|
|
height: 38px;
|
|
background: var(--color-accent-gradient);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-danger-text);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
letter-spacing: 0.5px;
|
|
user-select: none;
|
|
}
|
|
|
|
.user-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
left: auto;
|
|
width: 300px;
|
|
background: var(--color-bg-surface);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 12px 40px var(--color-shadow-md),
|
|
0 0 0 1px var(--color-shadow-xs);
|
|
z-index: 2000;
|
|
overflow: hidden;
|
|
animation: userMenuIn 0.2s ease-out;
|
|
}
|
|
|
|
.user-menu-wrapper.open .user-menu {
|
|
display: block;
|
|
}
|
|
|
|
[dir="rtl"] .user-menu {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
@keyframes userMenuIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.97);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.user-menu-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 20px 20px 16px;
|
|
background: var(--color-user-menu-header-bg);
|
|
border-bottom: 1px solid var(--color-user-menu-header-border);
|
|
}
|
|
|
|
.user-menu-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
min-width: 48px;
|
|
background: var(--color-accent-gradient);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-danger-text);
|
|
font-weight: 700;
|
|
font-size: 17px;
|
|
letter-spacing: 0.5px;
|
|
box-shadow: 0 4px 12px var(--color-accent-shadow);
|
|
}
|
|
|
|
.user-menu-info {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-menu-name {
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
color: var(--color-text-heading);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.user-menu-email {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-faint);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.user-menu-storage {
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.user-menu-storage-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text-subtle);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.user-menu-storage-label i {
|
|
font-size: 11px;
|
|
color: var(--color-text-faint);
|
|
}
|
|
|
|
.user-menu-storage-bar {
|
|
height: 6px;
|
|
background: var(--color-border-light);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.user-menu-storage-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-second));
|
|
border-radius: 3px;
|
|
width: 0%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.user-menu-storage-text {
|
|
font-size: 11.5px;
|
|
color: var(--color-text-faint);
|
|
}
|
|
|
|
.user-menu-divider {
|
|
height: 1px;
|
|
background: var(--color-border-light);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.user-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-dark);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.user-menu-item:hover {
|
|
background: var(--color-bg-hover);
|
|
}
|
|
|
|
.user-menu-item i {
|
|
width: 20px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
color: var(--color-text-subtle);
|
|
}
|
|
|
|
.user-menu-item .theme-toggle-pill {
|
|
margin-left: auto;
|
|
width: 40px;
|
|
height: 22px;
|
|
background: var(--color-border);
|
|
border-radius: 11px;
|
|
position: relative;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.user-menu-item .theme-toggle-pill.active {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.user-menu-item .theme-toggle-knob {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--color-danger-text);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 1px 4px var(--color-shadow-md);
|
|
}
|
|
|
|
.user-menu-item .theme-toggle-pill.active .theme-toggle-knob {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
.user-menu-admin {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.user-menu-admin i {
|
|
color: var(--color-info-blue);
|
|
}
|
|
|
|
.user-menu-admin:hover {
|
|
background: var(--color-info-bg-alt);
|
|
}
|
|
|
|
.user-menu-role-badge {
|
|
padding: 0 20px 4px;
|
|
}
|
|
|
|
.role-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 2px 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.role-badge-admin {
|
|
background: var(--color-info-surface);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.role-badge i {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.user-menu-logout {
|
|
color: var(--color-danger-alt);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.user-menu-logout i {
|
|
color: var(--color-danger-alt);
|
|
}
|
|
|
|
.user-menu-logout:hover {
|
|
background: var(--color-danger-lighter);
|
|
}
|